SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。
SASS 官网介绍：
sass is the most mature（成熟的）,stable（稳定的）,and powerful professional grade CSS extension language in the world.
官方文档：
http://sass-lang.com/documentation/file.SASS_REFERENCE.html
初学sass 遇到的最大阻碍可能是：需要搭建Ruby的运行环境和需要用命令行，其实这都非常简单。
一、安装
1、安装Ruby
SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先安装Ruby，然后再安装SASS。
安装SASS请参考SASS官方网站： http://sass-lang.com/install，windows下安装ruby:rubyinstaller.org。
安装时注意一点：勾选Add Ruby executables to your PATH，添加Ruby可执行路径到环境变量再安装。
安装成功Dos窗口输入ruby -v会出现版本信息。
2、安装sass
假定你已经安装好了Ruby，接着在命令行输入下面的命令：gem install sass
安装成功输入sass -v可以看到版本信息。
二、使用
1、编译
Note:注意sass的文件名后缀是scss而不是sass。
将style.scss编译成css
sass style.scss
将style.scss编译后保存成css文件
sass style.scss style.css
将style.scss编译后保存成压缩过的css文件
sass --style compressed style.scss style.css
--style控制编译风格，可选参数如下
- nested：嵌套缩进的css代码，它是默认值。
- expanded：没有缩进的、扩展的css代码。
- compact：简洁格式的css代码。
- compressed：压缩后的css代码。
sass监听文件或目录，源文件有变动，自动编译。
// watch a file sass --watch input.scss:output.css // watch a directory sass --watch app/sass:public/stylesheetss
2、语法
2.1、注释
和less一样，sass有两张注释
// 单行注释，不会作为最终输出 /* 多行注释，以原生CSS的/*注释....*/形式作为最终输出 */
在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。
/*! 重要注释！ */
2.2、变量
一般会把颜色，字体，将来会重用的css值存为变量，方便统一修改和维护。
//定义变量 $primary-color:#333; //变量调用 body{ color:$primary-color; }
如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
$side : left; .rounded{ border-#{$side}-radius:5px; }
2.3、嵌套
像html标签嵌套一样进行选择器嵌套写css，但是在生成css时有利有弊。
以下经典用法。
nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } }
会生成：
nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; }
属性也可以嵌套，比如border-color属性如下，border后面必须加冒号。
p{ border:{ color:red; } }
在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成：
a{ &:hover{color:red;} }
2.4、Less css片段和引入
目的：方便模块化和管理，小模块可维护性好。最终编译成一个css文件，这点比纯css的@import好。
弊端：多一个@import就多一个http请求。
片段命名：_partial.scss，引入用@import。
Demo:将_reset.scss import到base.scss。
_reset.scss如下
// _reset.scss
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
base.scss如下
// base.scss @import 'reset';
body { font: 100% Helvetica, sans-serif; background-color: #efefef; }
@import 'reset'即可。
2.5、mixin 重用代码块
在sass中可用定义重用的代码块，且可传参数，方便日后根据需求调用。
定义：通过@minxin name即可定义一个重复利用的样式。
调用：@include name
demo:
// mixin @mixin box($H:30px,$col:red){ height:$H; background-color:$col; } div.box{ @include box; //使用默认值 } div.box1{ @include box(50px,blue); //传参 }
编译结果：
div.box { height: 30px; background-color: red; } div.box1 { height: 50px; background-color: blue; }
css中有一些浏览器兼容性的代码，一些css3私有前缀等，此时使用mixins非常便捷，一个经典例子border-radius如下。
@mixin border-radius($radius){ -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box{@include border-radius(10px);}
2.6、继承
继承让一个选择器的样式被另一个选择器复用和覆盖。是一个DRY的语法，也最sass中有用的语法之一。
语法：@extend 选择器
demo:一系列提示信息。
.message{ border:1px solid #ccc; padding:10px; color:#333; } .success{ @extend .message; border-color:green; } .error{ @extend .message; border-color:red; } .warning{ @extend .message; border-color:yellow; }
编译后的css【继承实现了css组合声明】
.message, .success, .error, .warning { border: 1px solid #ccc; padding: 10px; color: #333; } .success { border-color: green; } .error { border-color: red; } .warning { border-color: yellow; }
2.7、运算符
包括+，-，*，、，%。
demo:计算aside和article的宽度。
.container{ width:100%; } article[role="main"]{ float:left; width:600px/960px*100%; } aside[role="complimentary"]{ float:right; width:300px/960px*100%; }
编译后css
.container { width: 100%; } article[role="main"] { float: left; width: 62.5%; } aside[role="complimentary"] { float: right; width: 31.25%; }
2.8、颜色
sass中集成了大量的颜色函数，让生成颜色更加简单
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
demo:
$linkColor: #08c; a { text-decoration:none; color:$linkColor; &:hover{ color:darken($linkColor,10%); } }
编译成css
a { text-decoration: none; color: #08c; } a:hover { color: #006699; }
3、高级语法
3.1、条件
if判断何种条件用何种样式。
p{ @if 1+1==2{border:1px solid red;} @if 5<2 {border:2px dotted red;} }
if,else配合使用。
demo:判断颜色中亮度大于30%，设置背景色为黑色，否则为白色。
$color : #1875e7; p{ @if lightness($color)>30%{ background-color:#000; }@else { background-color:#fff; } }
备注：lightness($color)：从一个颜色中获取亮度（lightness）值；
3.2、 循环语句
for循环
@for $i from 1 to 10{ .border-#{$i}{ border:#{$i}px solid blue; } }
编译生成如下css
.border-1 { border: 1px solid blue; } .border-2 {border: 2px solid blue; } .border-3 {border: 3px solid blue; } .border-4 {border: 4px solid blue; } .border-5 {border: 5px solid blue; } .border-6 {border: 6px solid blue; } .border-7 {border: 7px solid blue; } .border-8 {border: 8px solid blue; } .border-9 {border: 9px solid blue; }
while循环
$i : 6; @while $i > 0{ .item-#{$i} {width:2em * $i;} $i : $i - 2; }
编译成css
.item-6 {width: 12em; } .item-4 {width: 8em; } .item-2 {width: 4em; }
each遍历
@each $member in a,b,c,d{ .#{$member}{ background-image:url("images/#{$member}.jpg"); } }
编译成css
.a {background-image: url("images/a.jpg"); } .b {background-image: url("images/b.jpg"); } .c {background-image: url("images/c.jpg"); } .d {background-image: url("images/d.jpg"); }
3.3自定义函数
sass可自定义函数。
@function double($n){ @return $n * 2; } #sidebar{ width:double(5px); }
编译后css
#sidebar {width: 10px; }
资源链接：
http://www.w3cplus.com/sassguide/
本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/5226661.html有问题欢迎与我讨论，共同进步。