推荐网站：
http://www.w3cplus.com/sassguide/index.html
http://www.ruanyifeng.com/blog/2012/06/sass.html
一，Sass简介
Sass是一种”CSS预处理器”（css preprocessor）。它的基本思想是：用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。（注意：CSS不是一种编程语言）
Sass 是对CSS的扩展，让CSS语言更强大、优雅。它允许你使用变量、嵌套规则、mixins、导入等众多功能，并且完全兼容CSS语法。 Sass有助于保持大型样式表结构良好，同时也让你能够快速开始小型项目。
特色
完全兼容 CSS3
在 CSS 语言基础上添加了扩展功能，比如变量、嵌套 (nesting)、混合 (mixin)
对颜色和其它值进行操作的{Sass::Script::Functions 函数}
函数库控制指令之类的高级功能
良好的格式，可对输出格式进行定制
支持 Firebug
二，windows下安装Sass
Sass是基于Ruby的，所以必须先安装ruby,然后才能安装Sass。
在安装的时候，请勾选Add Ruby executables to your PATH这个选项，添加环境变量，不然以后使用编译软件的时候会提示找不到ruby环境
安装完ruby之后，在开始菜单中，找到刚才我们安装的ruby，打开Start Command Prompt with Ruby
使用gems命令安装Sass，在你打开的ruby命令行界面中输入下面的命令
三， Sass语法
1.使用
SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss(Sassy CSS)
1）屏幕上显示testsass.scss文件转化为css代码
2）如果将显示的结果保存test.css文件
3）让sass自动监听某个文件或目录的变化并做相应的处理。如：发现.scss文件变化，显示提示信息；发现.scss文件变化，自动生成编译后的css文件。
监视 testsass.scss的文件变化
监视变化，并自动生成css文件
4）sass的四种编程风格
* nested：嵌套缩进的css代码，它是默认值。
* expanded：没有缩进的、扩展的css代码。
* compact：简洁格式的css代码。
* compressed：压缩后的css代码。
代码编译后的样式：
2.基本语法变量
sass允许使用变量，所有变量以$开头，并且后面紧跟着变量名，而变量名和变量值之间使用冒号(:)分割，像定义css属性一样。如果值后面加上!default则表示默认值。
普通变量和默认变量
//定义普通变量
$fontSize:12px;
body{
font-size:$fontSize;
}
//默认变量
$baseLineHeight:1.5 !default;
body{
line-height:$baseLineHeight;
}sass的默认变量一般是用来设置默认值的，然后根据需求来覆盖，覆盖的方式也很简单，只需要在默认变量之前重新声明即可
声明变量时也可以引用其他变量：
$highlight-color:#ccc;
$highlight-border:1px solid $highlight-color;
.select{
border:$highlight-border;
}
$baseLineHeight: 2;
$baseLineHeight: 1.5 !dedault;
body{
line-height:$baseLineHeight;
}编译后的结果后的line-height是2，而不是默认的1.5.
特殊变量
如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中
$side:left;
.rounded{
border-#{$side}-radius:5px;
}全局变量和局部变量
当变量定义在css规则块内或者它们出现在任何形式的{…}块中（如@media或者@font-face块），那么该变量只能在此规则块内使用，这样的变量叫做局部变量；否则称为全局变量。
$nav-color:#F90;//全局变量，任何地方都可以使用
nav{
$width:100px;//局部变量，只能在nav内部使用
width:$width;
color:$nav-color;
} 例子
编译后的：
编译的时候指定压缩方式的：
3.嵌套
sass的嵌套包括两种：一种是选择器的嵌套，另一种是属性的嵌套。一般用的是选择器的嵌套。
1）选择器嵌套
div{
h1{
color:red;
}
}
//sass nesting
nav{
ul{
list-style-type:none;
}
li{
display:inline-block;
}
a{
display:block;
padding:5px 10px;
text-decoration:none;
background-color:black;
}
a:hover{
color:white;
}
}
//编译后的代码
nav ul {
list-style-type: none; }
nav li {
display: inline-block; }
nav a {
display: block;
padding: 5px 10px;
text-decoration: none;
background-color: black; }
nav a:hover {
color: white; }a{
display:block;
padding:0 10px;
color:#fff;
&:hover{
color:#ffb3ff;
}
}2)属性的嵌套
属性的嵌套是有些属性拥有同一个开始的单词，如border-width,border-color都是以border开头
p {
border:{
color:red;
}
}注意：border后面必须加上冒号
4. 导入文件
文件后缀名
sass有两种后缀名文件：
一种后缀名为sass，不使用大括号和分号；
另一种就是我们这里使用的scss文件，这种和我们平时写的css文件格式差不多，使用大括号和分号。而本文所有sass文件都指后缀名为scss的文件。在此也建议使用后缀名为scss的文件，以避免sass后缀名的严格格式要求报错。
导入
sass的导入(@import)规则和CSS的有所不同，编译时会将@import的scss文件合并进来只生成一个CSS文件。但是如果你在sass文件中导入css文件如@import ‘reset.css’，那效果跟普通CSS导入样式文件一样，导入的css文件不会合并到编译后的文件中，而是以@import方式存在。
所有的sass导入文件都可以忽略后缀名.scss。一般来说基础的文件命名方法以_开头，如_mixin.scss。这种文件在导入的时候可以不写下划线，可写成@import “mixin”。
被导入sass文件a.scss：
// a.scss
body{
background:#eee;
}需要导入样式的sass文件b.scss
@import "reset.css"
@omport "a"
p{
background:#0982c1;
}编译完成后的b.css样式
@import "reset.css"
body{
background:#eee;
}
p{
background:#0982c1;
}5) 注释
sass有两种注释方式，一种是标准的css注释方式/* */,另一种是//形式的单行注释。不过这种单行注释不会被转译出来，不会被输入到css中。
在/*后面加一个感叹号，表示这是重要的注释。即使是压缩模式编译，也会保留这行注释。
/*!
重要注释
*/5. 代码的重用
选择器继承@extend
sass允许一个选择器，继承另一个选择器
.class1{
border:1px solid #ddd;
}
//class2要继承class1，就要使用@extend命令
.class2{
@extend .class1;
font-size:120%;
}
.class1 ,.class2{
border:1px solid #ddd;
}
.class2{
font-size:120%;
}占位选择器%
从sass3.2.0以后就可以定义占位选择器。这种选择器的优势在于：如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，然后实际应用中不管是否使用了@extend去继承相应的样式，都会解析出来所有的样式。占位选择器以%标识定义，通过@extend调用。
//sass style
%ir{
color:transparent;
text-shadow:none;
background-color:transparent;
boeder:0;
}
#header{
h1{
@extend %ir;
width:300px;
}
}
.ir{
@extend %ir;
}
//css style
#header h1,
.ir{
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
#header h1{
width:300px;
}混合器使用@mixin标识符定义。这个标识符给一大段样式赋予一个名字，这样你就可以轻易地通过引用这个名字重用这段样式。有点像C语言中的宏，是可以重用的代码块。
混合器可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过@include来调用。
使用@mixin命令，定义一个代码块
@mixin left{
float:left;
margin-left:10px;
}使用@include命令，调用这个mixin
div{
@include left;
}指定参数的mixin
@mixin left($value:10px){
float:left;
margin-right:$value;
}调用时可直接传入值，如果@include传入参数的个数小于@mixin定义参数的个数，则按照顺序表示，后面不足的使用默认值；如果不足的没有默认值则报错。除此之外，还可以选择性的传入参数，使用参数名与值
//sass style
//指定了默认的边框和内边距
@mixin horizontal-line($border:1px dashed #ccc, $padding:10px){
border-bottom:$border;
padding-top:$padding;
padding-bottom:$padding;
}
//使用默认的内边距，指定边框
.imgtext-h li{
@include horizontal-line(1px solid #ccc);
}
//使用默认的边框，指定内边距
.imgtext-h--product li{
@include horizontal-line($padding:15px);
}
//css style
.imgtext-h li {
border-bottom: 1px solid #cccccc;
padding-top: 10px;
padding-bottom: 10px;
}
.imgtext-h--product li {
border-bottom: 1px dashed #cccccc;
padding-top: 15px;
padding-bottom: 15px;
}运算符： + - * / %
sass允许在代码中使用运算符进行计算，可以对数值型的值(如：数字、颜色、变量等)进行+、-、*、/和%运算。请注意运算符前后请留一个空格，不然会出错。
//sass style
.container {width:100%;}
aritle[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="comlimentary"]{
float:right;
width:31.25%;
}sass定义了很多函数可供使用，当然你也可以自己定义函数，以@fuction开始。实际项目中我们使用最多的应该是颜色函数，而颜色函数中又以lighten减淡和darken加深为最常使用，其调用方法为
//第一个参数都是颜色值，第二个参数都是百分比
lighten($color,$amount);
darken($color,$amount);
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
7 高级用法
1）if条件语句
p {
@if 1+1==2 {border: 1px solid;}
@if 5<3 { border:2px dotted;}
}
//if else语句配合使用
@if lightness($color)>30%{
background-color:#000;
}@else{
background-color:#fff;
}for 循环语句的两种形式
@for $var from <start> through <end>
@for $var from <start> to <end>
//$var可以为任意变量，如$i；<start>和<end>返回值为整数。两者的区别：from ... through循环包括<end>值；而from ... to循环不包括<end>值。
@for $i from 1 to 10{
.border-#{$i}{
border:#{$i}px solid blue;
}
}
while循环
$i: 6;
@while $i>0{
.item-#{$i} {width: 2em*$i;}
$i:$i-2;
}
@each $var in <list or map>
//其中$var可以为任意变量，如：$len、$animal等；而list和map表示list类型数据和map类型数据。
多字段的list循环
多个字段的map数据循环
自定义函数
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}三目判断
if($condition, $if_true, $if_false)
//举例
if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px参考文档：
http://www.w3cplus.com/sassguide/debug.html
http://www.ruanyifeng.com/blog/2012/06/sass.html
http://dobit.top/Detail/207.html
2160
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
