SASS学习教程

很自然地，有人就开始为CSS加入编程元素，这被叫做"CSS预处理器"（css preprocessor）。它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。各种"CSS预处理器"之中，我自己最喜欢SASS，觉得它有很多优点，打算以后都用它来写CSS。下面是我整理的用法总结，供自己开发时参考，相信对其他人也有用。

一、SASS是什么

SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。

sass有两种后缀名文件：一种后缀名为sass，不使用大括号和分号；另一种就是我们这里使用的scss文件，这种和我们平时写的css文件格式差不多，使用大括号和分号。而本教程中所说的所有sass文件都指后缀名为scss的文件。在此也建议使用后缀名为scss的文件，以避免sass后缀名的严格格式要求报错。

//文件后缀名为sass的语法
body
background: #eee
font-size:12px
p
background: #0982c1

//文件后缀名为scss的语法
body {
background: #eee;
font-size:12px;
}
p{
background: #0982c1;
}

二、环境安装

安装方法在这篇博客（http://blog.csdn.net/songchunmin_/article/details/51781495）有详细的说明，请童鞋们移步。

三、SASS编译命令（基本使用）

单文件转换命令

sass style.scss style.css

单文件监听命令

sass --watch style.scss:style.css

文件夹监听命令

sass --watch sassFileDirectory:cssFileDirectory

css文件转成sass/scss文件（在线转换工具css2sass：http://css2sass.heroku.com/）

sass-convert style.css style.sass
sass-convert style.css style.scss

命令行其他配置选项

运行命令行帮助文档，可以获得所有的配置选项

sass -h

我们一般常用的有

--style

，

--sourcemap

，

--debug-info

等。

sass --watch style.scss:style.css --style compact
sass --watch style.scss:style.css --sourcemap
sass --watch style.scss:style.css --style expanded --sourcemap
sass --watch style.scss:style.css --debug-info

--style

表示解析后的css是什么格式，有四种取值分别为：

nested

，

expanded

，

compact

，

compressed

。

--sourcemap

表示开启sourcemap调试。开启sourcemap调试后，会生成一个后缀名为

.css.map

文件。

--debug-info

表示开启debug信息，升级到3.3.0之后因为sourcemap更高级，这个debug-info就不太用了。

四种style生成后的css

// nested
#main {
color: #fff;
background-color: #000; }
#main p {
width: 10em; }

.huge {
font-size: 10em;
font-weight: bold;
text-decoration: underline; }

// expanded
#main {
color: #fff;
background-color: #000;
}
#main p {
width: 10em;
}

.huge {
font-size: 10em;
font-weight: bold;
text-decoration: underline;
}

// compact
#main { color: #fff; background-color: #000; }
#main p { width: 10em; }

.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }

// compressed
#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}

[/code]
三、SASS入门（基本使用）

6大常用的方法，由于篇幅比较长，请移步
http://blog.csdn.net/songchunmin_/article/details/51783487