sass(Syntactically Awesome StyleSheets)语法介绍

sass(Syntactically Awesome StyleSheets)语法

sass是一种CSS的预编译工具。它允许我们使用变量，嵌套规则，混和编译，外部文件导入等等特性，其编译出来的文件CSS完全兼容。

文件名后缀(.sass & .scss)

sass有两种后缀名文件：一种后缀名为sass，不使用大括号和分号；另一种就是我们这里使用的scss文件，这种和我们平时写的
css文件格式差不多，使用大括号和分号。.sass后缀的文件编写风格上更加类似于Ruby、Python等语言的代码书写风格，.scss
后缀的文件书写风格更加类似于CSS本身的书写风格。例如：

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

p
  background: #0982c1


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

p{
  background: #0982c1;
}

变量

sass的变量必须是$开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号(:)分隔开（就像CSS属性设置一样），如果值后面加上!default则表示默认值。
sass中变量可以分为：普通变量、默认变量、特殊变量、多值变量(List和Map)和全局变量这几种。

普通变量
定义之后可以在全局范围内使用。此处使用的是.scss后缀名，如果使用.sass后缀名，下面的示例代码将抛出编译错误！！！
在.sass后缀文件中，变量声明将不需要结尾处的 “;” 。同时也不需要出现”{}”这样的类似于代码块的书写风格。

//sass style
$fontSize: 12px;
body{
    font-size:$fontSize;
}
//css style
body{
    font-size:12px;
}

默认变量
sass的默认变量仅需要在值后面加上!default即可。

//sass style
$baseLineHeight:1.5 !default;
body{
    line-height: $baseLineHeight;
}
//css style
body{
    line-height:1.5;
}

sass的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量 之前 重新声明下变量即可.

//sass style
$baseLineHeight:2;
$baseLineHeight:1.5 !default;
body{
    line-height: $baseLineHeight;
}
//css style
body{
    line-height:2;
}

可以看出现在编译后的line-height为2，而不是我们默认的1.5。默认变量的价值在进行组件化开发的时候会非常有用。

特殊变量
一般我们定义的变量都为属性值，可直接使用，但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。

//sass style
$borderDirection:top !default;
$baseFontSize:12px !default;
$baseLineHeight:1.5 !default;
//应用于class和属性
.border-#{$borderDirection}{
  border-#{$borderDirection}:1px solid #ccc;
}
//应用于复杂的属性值
body{
    font:#{$baseFontSize}/#{$baseLineHeight};
}
//css style
.border-top{
  border-top:1px solid #ccc;
}
body {
  font: 12px/1.5;
}

多值变量
多值变量分为list类型和map类型，简单来说list类型有点像js中的数组，而map类型有点像js中的对象。
list
list数据可通过空格，逗号或小括号分隔多个值，可用nth($var,$index)取值。关于list数据操作还有很多其他函数如

方法名称	说明
length($list)
join($list1,$list2,[$separator])
append($list,$value,[$separator])

[简要示例]
更过list方法可参考sass Functions（搜索List Functions即可）
使用示例：

//一维数据
$px: 5px 10px 20px 30px;
//二维数据，相当于js中的二维数组
$px: 5px 10px, 20px 30px;
$px: (5px 10px) (20px 30px);
//sass style
$linkColor:#08c #333 !default; //第一个值为默认值，第二个鼠标滑过值
a{
  color:nth($linkColor,1);
  &:hover{
    color:nth($linkColor,2);
  }
}
//css style
a{
  color:#08c;
}
a:hover{
  color:#333;
}

map
map数据以key和value成对出现，其中value又可以是list。格式为：$map: (key1: value1, key2: value2, key3: value3); 可通过map-get($map,$key)取值。关于map数据还有很多其他函数如map-merge($map1,$map2)，map-keys($map)，map-values($map)等，
具体可参考sass Functions（搜索Map Functions即可）

$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);
//sass style
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}
//css style
h1 {
  font-size: 2em;
}
h2 {
  font-size: 1.5em;
}
h3 {
  font-size: 1.2em;
}

全局变量
在变量值后面加上!global即为全局变量。该特性是sass 3.4后的版本中正式应用，在此之前的版本中应用将编译出错。
出现全局变量的主要原因是为了解决：在选择器中声明的变量会覆盖外面全局声明的变量(也就是常说的sass没有局部变量)的问题。

//sass style
$fontSize:12px;

body{
    $fontSize: 14px;
    font-size:$fontSize;
}

p{
    font-size:$fontSize;
}

//css style
body{
    font-size:14px;
}

p{
    font-size:14px;
}

启用global之后的机制

//sass style
$fontSize:      12px;
$color:         #333;

body{
    $fontSize: 14px;
    $color：   #fff !global;
    font-size:$fontSize;
    color:$color;
}

p{
    font-size:$fontSize;
    color:$color;
}

//css style
body{
    font-size:14px;
    color:#fff;
}

p{
    font-size:12px;
    color:#fff;
}

这里设置了两个变量，然后在body里面重新设置了下，有点不同的是对于$color变量，我们设置了!global。
通过编译后的css可以看到font-size取值不同，而color取值相同。与上面的机制对比就会发现默认在选择器里面的变量为局部变量，
而只有设置了!global之后才会成为全局变量。

注释

sass有两种注释方式，一种是标准的css注释方式/* */，另一种则是//双斜杆形式的单行注释，区别在于单行注释不会被转译出来。例如：
标准的css注释

/*
* css的标准注释
*/
body{
  padding:5px;
}

双斜杆单行注释

//双斜杠表示的单行注释
body{
  padding:5px; //5px
}

导入(@import)

sass的导入(@import)规则和CSS的有所不同，sass在编译时会将@import的scss文件合并进来只生成一个CSS文件。但是如果我们在sass文件
中导入css文件如@import ‘reset.css’，那效果跟普通CSS导入样式文件一样，导入的css文件不会合并到编译后得的css文件中，而是以@import方式存在。
在sass文件中所有的sass导入文件都可以忽略后缀名.scss。另外，如果基础的文件命名方法以_开头，如_mixin.scss。这种文件在导入的时候可以不写下划线，
可写成@import “mixin”，同时省略了文件的”_”前缀和”.scss”后缀。例如：
被导入sass文件a.scss：

body {
  background: #eee;
}

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

@import "reset.css";
@import "a";

p{
  background: #0982c1;
}

转译出来的b.css样式：

@import "reset.css";

body {
  background: #eee;
}

p{
  background: #0982c1;
}

根据上面的演示示例可以看出，b.scss编译后，reset.css继续保持原生css的import方式，而a.scss则被整合到了b.scss文件中一起进行编译。

嵌套(Nesting)

sass的嵌套包括两种：一种是选择器的嵌套；另一种是属性的嵌套。这里需要我们具备一定的CSS选择器的知识，更多内容请参看W3.org中的相关文档。
选择器嵌套
选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而增强了sass文件的结构性和可读性。在选择器嵌套中，可以使用&表示父元素选择器
代码示例：

//sass style
#top_nav{
  line-height: 40px;
  text-transform: capitalize;
  background-color:#333;

  li{
    float:left;
  }

  a{
    display: block;
    padding: 0 10px;
    color: #fff;

    &:hover{
      color:#ddd;
    }
  }
}

//css style
#top_nav{
  line-height: 40px;
  text-transform: capitalize;
  background-color:#333;
}

#top_nav li{
  float:left;
}

#top_nav a{
  display: block;
  padding: 0 10px;
  color: #fff;
}

#top_nav a:hover{
  color:#ddd;
}

属性嵌套
所谓属性嵌套指的是有些属性拥有同一个开始单词，如border-width，border-color都是以border开头的。
不过属性嵌套在实际的生产环境中使用并不多，具体演示示例代码如下：

//sass style
.shadow {
  border: {
    style: solid;
    left: {
      width: 4px;
      color: #888;
    }
    right: {
      width: 2px;
      color: #ccc;
    }
  }
}

//css style
.shadow {
  border-style: solid;
  border-left-width: 4px;
  border-left-color: #888;
  border-right-width: 2px;
  border-right-color: #ccc;
}

混合(mixin)

sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过@include来调用。

无参数mixin

//sass style
@mixin center-block {
    margin-left:auto;
    margin-right:auto;
}
.demo{
    @include center-block;
}

//css style
.demo{
    margin-left:auto;
    margin-right:auto;
}

有参数mixin

//sass style
@mixin opacity($opacity:50) {
  opacity: $opacity / 100;
  filter: alpha(opacity=$opacity);
}

//css style
.opacity{
  @include opacity; //参数使用默认值
}

.opacity-80{
  @include opacity(80); //传递参数
}

多个参数mixin
调用时可直接传入值，如@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;
}

多组值参数mixin
如果一个参数可以有多组值，如box-shadow、transition等，那么参数则需要在变量后加三个点表示，如$variables…。

//sass style
//box-shadow可以有多组值，所以在变量参数后面添加...
@mixin box-shadow($shadow...) {
  -webkit-box-shadow:$shadow;
  box-shadow:$shadow;
}

.box{
  border:1px solid #ccc;
  @include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));
}

//css style
.box{
  border:1px solid #ccc;
  -webkit-box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);
  box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);
}

@content
@content在sass3.2.0中引入，可以用来解决css3的@media等带来的问题。它可以使@mixin接受一整块样式，接受的样式从@content开始。

//sass style
@mixin max-screen($res){
  @media only screen and ( max-width: $res )
  {
    @content;
  }
}

@include max-screen(480px) {
  body { color: red }
}

//css style
@media only screen and (max-width: 480px) {
  body { color: red }
}

@mixin通过@include调用后解析出来的样式是以拷贝形式存在的，而下面的继承则是以联合声明的方式存在的，
所以从3.2.0版本以后，建议传递参数的用@mixin，而非传递参数类的使用下面的继承%。

继承

sass中，选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。使用选择器的继承，要使用关键词@extend，后面紧跟需要继承的选择器。

//sass style
h1{
  border: 4px solid #ff9aa9;
}

.speaker{
  @extend h1;
  border-width: 2px;
}

//css style
h1,.speaker{
  border: 4px solid #ff9aa9;
}

.speaker{
  border-width: 2px;
}

占位选择器%

从sass 3.2.0以后就可以定义占位选择器%。这种选择器的优势在于：如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，
然后实际应用中不管是否使用了@extend去继承相应的样式，都会解析出来所有的样式。占位选择器以%标识定义，通过@extend调用。

//sass style
%ir{
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

%clearfix{
  @if $lte7 {
    *zoom: 1;
  }
  &:before,
  &:after {
    content: "";
    display: table;
    font: 0/0 a;
  }
  &:after {
    clear: both;
  }
}

#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;
}

如上代码，定义了两个占位选择器%ir和%clearfix，其中%clearfix这个没有调用，所以解析出来的css样式也就没有clearfix部分。占位选择器的出现，
使css文件更加简练可控，没有多余。所以可以用其定义一些基础的样式文件，然后根据需要调用产生相应的css。在@media中暂时不能@extend @media外的代码片段，以后将会可以。

函数

sass定义了很多函数可供使用，当然你也可以自己定义函数，以@fuction开始。sass的官方函数链接为：sass fuction，实际项目中我们使用最多的应该是颜色函数
，而颜色函数中又以lighten减淡和darken加深为最，其调用方法为lighten($color,$amount)和darken($color,$amount)，它们的第一个参数都是颜色值，第二个参数都是百分比。

//sass style
$baseFontSize:      10px !default;
$gray:              #ccc !defualt;

// pixels to rems
@function pxToRem($px) {
  @return $px / $baseFontSize * 1rem;
}

body{
  font-size:$baseFontSize;
  color:lighten($gray,10%);
}
.test{
  font-size:pxToRem(16px);
  color:darken($gray,10%);
}

//css style
body{
  font-size:10px;
  color:#E6E6E6;
}

.test{
  font-size:1.6rem;
  color:#B3B3B3;
}

运算

sass具有运算的特性，可以对数值型的Value(如：数字、颜色、变量等)进行加减乘除四则运算。请注意运算符前后请留一个空格，不然会出错。

$baseFontSize:14px !default;
$baseLineHeight:1.5 !default;
$baseGap:$baseFontSize * $baseLineHeight !default;
$halfBaseGap:$baseGap / 2  !default;
$samllFontSize:$baseFontSize - 2px  !default;

//grid
$_columns:12 !default;      // Total number of columns
$_column-width:60px !default;   // Width of a single column
$_gutter:20px !default;     // Width of the gutter
$_gridsystem-width:$_columns * ($_column-width + $_gutter); //grid system width

条件判断及循环

@if判断
@if可一个条件单独使用，也可以和@else结合多条件使用

//sass style
$lte7: true;
$type: monster;
.ib{
    display:inline-block;
    @if $lte7 {
        *display:inline;
        *zoom:1;
    }
}

p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

//css style
.ib{
    display:inline-block;
    *display:inline;
    *zoom:1;
}

p {
  color: green;
}

三目判断
语法为：if($condition,$if_true, $if_false) 。三个参数分别表示：条件，条件为真的值，条件为假的值。

if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px

for循环
for循环有两种形式，分别为：@for $var from <start> through <end>和@for$var from to 。
$i表示变量，start表示起始值，end表示结束值，这两个的区别是关键字through表示包括end这个数，而to则不包括end这个数。

//sass style
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

//css style
.item-1 {
  width: 2em;
}

.item-2 {
  width: 4em;
}

.item-3 {
  width: 6em;
}

@each循环
语法为：@each $var in <list or map>。其中$var表示变量，而list和map表示list类型数据和map类型数据。sass 3.3.0新加入了多字段循环和map数据循环。
单个字段list数据循环

//sass style
$animal-list: puma, sea-slug, egret, salamander;
@each $animal in $animal-list {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

//css style
.puma-icon {
  background-image: url('/images/puma.png');
}

.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
}

.egret-icon {
  background-image: url('/images/egret.png');
}

.salamander-icon {
  background-image: url('/images/salamander.png');
}

多个字段list数据循环

//sass style
$animal-data: (puma, black, default),(sea-slug, blue, pointer),(egret, white, move);
@each $animal, $color, $cursor in $animal-data {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

//css style
.puma-icon {
  background-image: url('/images/puma.png');
  border: 2px solid black;
  cursor: default;
}

.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
  border: 2px solid blue;
  cursor: pointer;
}

.egret-icon {
  background-image: url('/images/egret.png');
  border: 2px solid white;
  cursor: move;
}

多个字段map数据循环

//sass style
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}

//css style
h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.5em;
}

h3 {
  font-size: 1.2em;
}

以上内容可能随着sass的不断演进而产生变化，如果学习与使用过程中出现问题，请访问sass官方网站进行修正：http://sass-lang.com