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}
   
   


   
   
 
 

三、SASS入门（基本使用）

6大常用的方法，由于篇幅比较长，请移步

http://blog.csdn.net/songchunmin_/article/details/51783487