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 nestingnav{   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.scssbody{ background:#eee;}

需要导入样式的sass文件b.scss

@import "reset.css"@omport "a"p{ background:#0982c1;}

编译完成后的b.css样式

@import "reset.css"body{ background:#eee;}p{ background:#0982c1;}

根据上面的代码可以看出，b.scss编译后，reset.css继续保持import的方式，而a.scss被整合了进来了。

5) 注释

sass有两种注释方式，一种是标准的css注释方式/* */,另一种是//形式的单行注释。不过这种单行注释不会被转译出来，不会被输入到css中。

在/*后面加一个感叹号，表示这是重要的注释。即使是压缩模式编译，也会保留这行注释。

/*!     重要注释*/

5代码的重用

选择器继承@extend

sass允许一个选择器，继承另一个选择器

.class1{   border:1px solid #ddd;}//class2要继承class1，就要使用@extend命令.class2{ @extend .class1; font-size:120%;}

编译后的css代码：

.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
混合器使用@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;}

6 其他
运算符： + - * / %

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);

sass提供了一些内置的颜色函数，以便生成系列颜色

lighten(#cc3, 10%) // #d6d65cdarken(#cc3, 10%) // #a3a329grayscale(#cc3) // #808080complement(#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;}

2) 循环语句
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命令，

@each $var in <list or map>//其中$var可以为任意变量，如：$len、$animal等；而list和map表示list类型数据和map类型数据。

单个字段list数据循环

多字段的list循环

多个字段的map数据循环

自定义函数

@function double($n) {　　　　@return $n * 2;　　}　　#sidebar {　　　　width: double(5px);　　}

三目判断

if($condition, $if_true, $if_false)//举例if(true, 1px, 2px) => 1pxif(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