一.準(zhǔn)備工作：

1.安裝（mac）：
gem install sass;
2.sass文件的預(yù)編譯：

屏幕快照 2018-03-05 上午12.42.16.png

二.變量

1.變量可以在css規(guī)則塊定義之外存在。當(dāng)變量定義在css規(guī)則塊內(nèi)，那么該變量只能在此規(guī)則塊內(nèi)使用。

$border-color: green;

.box {
  $font-size: 20px;
  font-size: $font-size;
  height: 300px;
  width: 300px;
  border: 1px solid $border-color;

}

2.將局部變量轉(zhuǎn)為全局變量：!global

.scss文件：
.scroll-list {
  $list-style: none !global;
  li {
    list-style: $list-style;
  }
}
.project-list {
  list-style: $list-style;
}

編譯后.css文件：
.scroll-list li {
  list-style: none; }

.project-list {
  list-style: none; }

三.sass文件的導(dǎo)入

1.sass的@import規(guī)則在生成css文件時(shí)就把相關(guān)文件導(dǎo)入進(jìn)來。這意味著所有相關(guān)的樣式被歸納到了同一個(gè)css文件中，而無需發(fā)起額外的下載請(qǐng)求。另外，所有在被導(dǎo)入文件中定義的變量和混合器均可在導(dǎo)入文件中使用。
2.使用sass的@import規(guī)則并不需要指明被導(dǎo)入文件的全名。例如：@import"sidebar";可以隨意修改你或別人寫的被導(dǎo)入的sass樣式文件語法，在sass和scss語法之間隨意切換。
3.sass局部文件的導(dǎo)入
約定sass局部文件的文件名以下劃線開頭。例如： _night-sky.scss
約定的目的： sass就不會(huì)在編譯時(shí)單獨(dú)編譯這個(gè)文件輸出css。
導(dǎo)入方式：

import 'night-sky';

4.默認(rèn)變量值：
作用：局部文件可以被多個(gè)不同的文件引用，但有時(shí)需要對(duì)導(dǎo)入的樣式做一些修改，所以需要默認(rèn)變量值。

$box-width: 30px !default;
.box {
   width: $box-width;
}

當(dāng)被導(dǎo)入的sass文件中已經(jīng)對(duì)該變量賦了值，則導(dǎo)入的文件中的值無效，否則為默認(rèn)值。
5.嵌套導(dǎo)入
sass允許@import命令寫在css規(guī)則內(nèi)：

_2.scss:

.face {
  width: 20px;
  height: 40px;
}

1.scss: 

.mouse {
  @import "import-sass/2";
}

結(jié)果：

.mouse .face {
  width: 20px;
  height: 40px;
 }

6.原生的css文件的導(dǎo)入：
三種情況下會(huì)生成原生的CSS@import，但會(huì)造成瀏覽器解析css時(shí)的額外下載：
（1）被導(dǎo)入文件的名字以.css結(jié)尾；
（2）被導(dǎo)入文件的名字是一個(gè)URL地址（比如http://www.sass.hk/css/css.css），由此可用谷歌字體API提供的相應(yīng)服務(wù)；
（3）被導(dǎo)入文件的名字是CSS的url()值。
在sass文件中導(dǎo)入css文件的方法：
把原始的css文件改名為.scss后綴，即可直接導(dǎo)入了。

四.靜默注釋：

1.作用：靜默注釋在生出的css文件中會(huì)被抹去.
2.樣式：

.finger {
  font-size: 12px; // 字體大小
}

五.混合器：

sass的混合器可以實(shí)現(xiàn)大段樣式的重用?；旌掀魇褂聾mixin標(biāo)識(shí)符定義。例子：

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

1.何時(shí)使用混合器：
對(duì)一大段代碼能起一個(gè)代表性的名字
2.混合器中的css規(guī)則：
混合器可以使用嵌套：

@mixin radius {
  border-radius: 10px;
  div.box-image {
    border-color: red;
    border-width: 3px;
  }
}
.clothes {
  color: #000;
  @include radius;
}

結(jié)果：

.clothes {
  color: #000;
  border-radius: 10px;
}
  .clothes div.box-image {
    border-color: red;
    border-width: 3px; 
}

3.給混合器傳入?yún)?shù)：

@mixin box-color ($normal,$hover,$visited) {
  background-color: $normal;
  &:hover {
    background-color:$hover;
  }
  &:visited{
    background-color: $visited;
  }
}

.food {
  @include box-color(red,yellow,green)
}

六.使用選擇器繼承

1.選擇器繼承：

.aside {
  border: 1px solid red;
  background-color: yellow;
}
.aside div{
  color: #ccc;
}
.aside li {
  font-size: 20px;
}
.footer {
  @extend .aside;
  border-width: 2px;
}

注意：任何與.aside 相關(guān)的樣式都會(huì)被繼承。
結(jié)果是：

.aside, .footer {
  border: 1px solid red;
  background-color: yellow; }

.aside div, .footer div {
  color: #ccc; }

.aside li, .footer li {
  font-size: 20px; }

.footer {
  border-width: 2px; }

六.SassScript中的數(shù)據(jù)類型

1.SassScript 可作用于任何屬性，允許屬性使用變量、算數(shù)運(yùn)算等額外功能。
2.數(shù)據(jù)類型

數(shù)字: 1, 2, 13, 10px
字符串: 有引號(hào)字符串與無引號(hào)字符串，"foo", 'bar', baz
顏色: blue, #04a3f9, rgba(255,0,0,0.5)
布爾型: true, false
空值: null
數(shù)組 (list): 用空格或逗號(hào)作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
maps: 相當(dāng)于 JavaScript 的 object，(key1: value1, key2: value2)

3.只有當(dāng)插值語句傳入有引號(hào)的字符串，才會(huì)被編譯為無引號(hào)字符串例子：

@mixin font-style($selector){
  .text-title #{$selector} {
    font-style: italic;
  }
}
.text {
  @include font-style(".first-line");
}

編譯結(jié)果：
.text .text-title .first-line {
  font-style: italic; }

4.三處會(huì)將‘/’作為運(yùn)算符的情況：

• 如果值，或值的一部分，是變量或者函數(shù)的返回值
• 如果值被圓括號(hào)包裹
• 如果值是算數(shù)表達(dá)式的一部分

/*除法運(yùn)算*/
.box-img {
  $width: 20px;
  width: $width/2;
  height: (500px/2);
  margin-left: 5px + 18px/2;
}

結(jié)果：
.box-img {
  width: 10px;
  height: 250px;
  margin-left: 14px; }

5.顏色運(yùn)算：

.box-bgc {
  background-color: #111 + #222;
  color: (#888/2);
  border-color: rgba(100,100,100,0.8) + rgba(50,50,50,0.8); 
// 其中透明度是不能計(jì)算的，必須相等
}

結(jié)果：
.box-bgc {
  background-color: #333333;
  color: #444444;
  border-color: rgba(150, 150, 150, 0.8); }

透明度運(yùn)算：

.list-bgc {
  $color: rgba(100,100,100,0.3);
  color: opacify($color,0.5);  //加法
  background-color: transparentize($color,0.1); // 減法
}

結(jié)果：
.list-bgc {
  color: rgba(100, 100, 100, 0.8);
  background-color: rgba(100, 100, 100, 0.2); }

6.有無引號(hào)字符串順序的區(qū)別：

.symbol {
  font-family: "Microsoft " + YaHei;
  border-style: i + 'talic';
}

結(jié)果：
.symbol {
  font-family: "Microsoft YaHei";
  border-style: italic; }

7.字符串運(yùn)算之 +：

連接字符串：
.mouse {
  cursor: p + ointer;
}
結(jié)果：
.mouse {
  cursor: pointer; }

8.插值語句 #{}：

$name: color;
$attr: border;
$font-size: 22px;
$line-height: 11px;
.img-#{$name} {
  #{$attr}-color: red;
  font: #{$font-size}/#{$line-height}; // 使用 #{} 可以避免 Sass 運(yùn)行運(yùn)算表達(dá)式，直接編譯 CSS。
}

結(jié)果：
.img-color {
  border-color: red;
  font: 22px/11px; }

七.控制指令：

1.if

p {
  @if 1 + 1 == 2 {
    color: red;
  }
  @if 2+ 3 > 5 {
    font-size: 12px;
  }
  @if null {
    border: 1px solid #ccc;
  }
}

/*if語句*/

$type: opacity;

li {
  @if $type == red {
    color: #000;
  } @else if($type == yellow) {
    color: red;

  } @else if($type == opacity) {
    color: green;
  }
}

結(jié)果：
p {
  color: red; }

/*if語句*/
li {
  color: green; }

2.for語句：

@for $i from 1 through 3 {
  icon-#{$i} {
    width: 20px * $i;
  }
}
結(jié)果：
/*for語句*/
icon-1 {
  width: 20px; }

icon-2 {
  width: 40px; }

icon-3 {
  width: 60px; }

@for $i from 1 to 3 {
  fly-#{$i} {
    height: 30px * 1;
  }
}

//結(jié)果：
fly-1 {
  height: 30px; }

fly-2 {
  height: 30px; }

3.each語句：

@each $var in dog,cat,sheep {
  .box-#{$var} {
    background-color: red;
  }
}

@each $key,$value in (header: red,body: yellow,foot: blue) {
  .fix-#{$key} {
    color: $value;
  }
}

@each $name,$color,$url in (asia,yellow,China),(africa,black,agla),(oceania,white,austrilia) {
  .earth-#{$name} {
    color: $color;
    background: url(image/#{$url}.jpg);
  }
}

//結(jié)果：
.box-dog {
  background-color: red; }
.box-cat {
  background-color: red; }
.box-sheep {
  background-color: red; }

.fix-header {
  color: red; }
.fix-body {
  color: yellow; }
.fix-foot {
  color: blue; }

.earth-asia {
  color: yellow;
  background: url(image/China.jpg); }
.earth-africa {
  color: black;
  background: url(image/agla.jpg); }
.earth-oceania {
  color: white;
  background: url(image/austrilia.jpg); }

4.while語句：

$while-val: 6;
@while $while-val > 2 {
  .chart-#{$while-val} {
    width: 20px * $while-val;
  }
  $while-val: $while-val - 1;
}

// 結(jié)果：
.chart-6 {
  width: 120px; }

.chart-5 {
  width: 100px; }

.chart-4 {
  width: 80px; }

.chart-3 {