2015年10月19日
1.SASS和SCSS的區(qū)別
1）文件擴(kuò)展名不同，Sass 是以“.sass”后綴為擴(kuò)展名，而 SCSS 是以“.scss”后綴為擴(kuò)展名
2）語(yǔ)法書(shū)寫(xiě)方式不同，Sass 是以嚴(yán)格的縮進(jìn)式語(yǔ)法規(guī)則來(lái)書(shū)寫(xiě)，不帶大括號(hào)"{}"和分號(hào)";"，而 SCSS 的語(yǔ)法書(shū)寫(xiě)和我們的 CSS 語(yǔ)法書(shū)寫(xiě)方式非常類(lèi)似
示例：
SASS語(yǔ)法：

      $font-stack:  Helvetica, sans-serif  //定義變量
      $primary-color:  #333    //定義變量

        body
                font: 100%  $font-stack
                color: $primary-color

SCSS語(yǔ)法：

      $font-stack:  Helvetica, sans-serif；  //定義變量
      $primary-color:  #333；    //定義變量

        body {
                font: 100%  $font-stack;
                color: $primary-color;
}

2.SASS/SCSS與CSS寫(xiě)法的差別
1）SASS無(wú)大括號(hào)和分號(hào)
2）SCSS與CSS寫(xiě)法無(wú)差別

3.SASS的編譯
SASS的編譯方法：命令編譯、GUI工具編譯、自動(dòng)化編譯
1）命令編譯
命令編譯是指使用電腦中的命令終端，通過(guò)輸入Sass指令來(lái)編譯Sass。這種編譯方式是最直接也是最簡(jiǎn)單的一種方式。因?yàn)橹恍枰诿罱K端輸入
單文件編譯（對(duì)一個(gè)單文件進(jìn)行編譯）
sass<要編譯的Sass文件路徑>/style.scss:<要輸出CSS文件路徑>/style.css

 多文件編譯（對(duì)整個(gè)項(xiàng)目所有Sass文件編譯成CSS文件）

sass sass/:css/
上面的命令表示將項(xiàng)目中"sass"文件夾中所有".scss"(".sass")文件編譯成".css"文件，并且將這些CSS文件都放在項(xiàng)目"css"文件夾中。

  缺點(diǎn)及解決辦法

在實(shí)際編譯過(guò)程中，你會(huì)發(fā)現(xiàn)上面的命令，只能一次性編譯。每次個(gè)性保存".scss"文件之后，都得重新執(zhí)行一次這樣的命令。如此操作太麻煩，其實(shí)還有一種方法，就是在編譯 Sass 時(shí)，開(kāi)啟"watch"功能，這樣只要你的代碼進(jìn)行任何修改，都能自動(dòng)監(jiān)測(cè)到代碼的變化，并且給你直接編譯出來(lái)：
sass --watch<要編譯的Sass文件路徑>/style.scss:<要輸出CSS文件路徑>/style.css

 watch舉例：

假設(shè)我本地有一個(gè)項(xiàng)目，我要把項(xiàng)目中"bootstrap.scss"編譯成"bootstrap.css"文件，并且把編譯出來(lái)的文件放在"css"文件夾中，我可以在命令端執(zhí)行：
sass --watch
sass/bootstrap.scss:css/bootstrap.css
一旦bootstrap.scss文件有任何修改，只要重新保存了修改的文件，命令終端就能監(jiān)測(cè)，并能重新編譯出文件

2）GUI界面工具編譯

4.輸出方式
1）嵌套輸出方式nested
Sass提供了一種嵌套顯示CSS文件的方式。例如：

nav{
    ul{
        margin: 0;
        padding: 0;
        list-style: none;
        }
       li{
          display: inline-block;
          }
        a{
            display: block;
            padding: 6px 12px;
            text-decoration: none;
            }
}

在編譯的時(shí)候帶上參數(shù)"--style nested";
編譯出來(lái)的 CSS 樣式風(fēng)格：

nav ul {
  margin: 0;
  padding: 0;
  list-style: none; }
nav li {
  display: inline-block; }
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none; }

2）展開(kāi)輸出方式expanded

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

在編譯的時(shí)候帶上參數(shù)"--style expanded":
sass --watch test.scss:test.css --style expanded

這個(gè)輸出的 CSS 樣式風(fēng)格和 nested 類(lèi)似，只是大括號(hào)在另起一行，同樣上面的代碼，編譯出來(lái)：

nav ul { 
            margin: 0; 
            padding: 0; 
            list-style: none;
          }
nav li {
           display: inline-block;
          } 
nav a { 
display: block; 
padding: 6px 12px; 
text-decoration: none;
          }

3）緊湊輸出方式compact

nav{
      ul{
          margin: 0;
          padding: 0;
          list-style: none;
        }
        li{
            display: inline-block;
          }
         a{
              display: block;
              padding: 6px 12px;
              text-decoration: none;
            }
}

在編譯的時(shí)候帶上參數(shù)"--style compact":
sass --watch test.scss:test.css --style compact

該方式適合那些喜歡單行 CSS 樣式格式的朋友，編譯后的代碼如下：

nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }
nav a { display: block; padding: 6px 12px; text-decoration: none; }

4）壓縮輸出方式 compressed

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

在編譯的時(shí)候帶上參數(shù)"--style compressed":
sass --watch test.scss:test.css --style compressed

壓縮輸出方式會(huì)去掉標(biāo)準(zhǔn)的 Sass 和 CSS 注釋及空格。也就是壓縮好的 CSS 代碼樣式風(fēng)格：

nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}

一段時(shí)間之后，你實(shí)際上就不再需要寫(xiě) CSS 代碼了，只用寫(xiě) Sass 代碼。在這種情況下，你只需要設(shè)定輸出格式為壓縮格式，知道輸出的 CSS 代碼可以直接使用即可。

5.Sass的調(diào)試
只要瀏覽器支持"sourcemap"功能即可在瀏覽器中調(diào)試。早一點(diǎn)的版本，需要在編譯的時(shí)候添加"--sourcemap"參數(shù):
sass --watch --scss --sourcemap
style.scss:style.css

在Sass3.3版本之上，不需要添加這個(gè)參數(shù)也可以：
sass --watch style.scss:style.css

在命令終端，你將看到一個(gè)信息：

Change detected to: style.scss
write style.css
write style.css.map
這時(shí)你就可以調(diào)試你的代碼

6.聲明變量
定義變量的語(yǔ)法：
以"$"開(kāi)頭： $width: 300px;
Sass變量包括三個(gè)部分：
1.聲明變量的符號(hào)"$"
2.變量名稱(chēng)
3.賦予變量的值

來(lái)看一個(gè)簡(jiǎn)單的示例，假設(shè)你的按鈕顏色可以給其聲明幾個(gè)變量：

$brand-primary: darken(#428bca,  6.5%)  !default;
$btn-primary-color:  #fff  !default;
$btn-primary-bg:  $brand-primary  !default;
$btn-primary-border:  darken($btn-primary-bg,  5%)  !default;

如果值后面加上!default則表示默認(rèn)值

7.普通變量與默認(rèn)變量
1）普通變量
定義之后可以在全局范圍內(nèi)使用。

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

編譯后的css代碼：

body{
    font-size: 12px;
}

2）默認(rèn)變量
sass的默認(rèn)變量?jī)H需要在值后面加上!default即可。

$baseLineHeight:1.5 !default;
body{ line-height: $baseLineHeight; }

編譯后的css代碼：

body{
    line-height:1.5;
}

sass的默認(rèn)變量一般是用來(lái)設(shè)置默認(rèn)值，然后根據(jù)需求來(lái)覆蓋的，覆蓋的方式也很簡(jiǎn)單，只需要在默認(rèn)變量之前重新聲明下變量即可。

$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{ line-height: $baseLineHeight; }

編譯后的css代碼：

body{ line-height: 2;}

可以看出現(xiàn)在編譯后的 line-height 為 2，而不是我們默認(rèn)的 1.5。默認(rèn)變量的價(jià)值在進(jìn)行組件化開(kāi)發(fā)的時(shí)候會(huì)非常有用。

8.變量的調(diào)用
在Sass中聲明了變量之后，就可以在需要的地方調(diào)用變量。調(diào)用變量的方法也非常的簡(jiǎn)單。
比如在定義了變量

$brand-primary : darken(#428bca, 6.5%) !default; // #337ab7
$btn-primary-color: #fff !default;
$btn-primary-bg : $brand-primary !default;
$btn-primary-border : darken($btn-primary-bg, 5%) !default;

在按鈕button中調(diào)用，可以按下面的方式調(diào)用

.btn-primary{
    background-color: $btn-primary-bg;
    color: $btn-primary-color;
    border: 1px solid $btn-primary-border;
}

編譯出來(lái)的CSS:

.btn-primary{
    background-color: #337ab7;
    color: #fff;
    border: 1px solid #2e6da4;
}

9.局部變量和全局變量
示例：

//scss
$color: orange  !default;//定義全局變量(在選擇器、函數(shù)、混合宏....的外面定義的變量為全局變量)
.block{
  color: $color;//調(diào)用全局變量
}
em{
        $color:  red;//定義局部變量
          a{
              color: $color;//調(diào)用局部變量
            }
}
span{
      color: $color;//調(diào)用全局變量
}

css的結(jié)果:

//CSS
.block {
  color: orange;
}
em a {
  color: red;
}
span {
  color: orange;
}

上面的示例演示可以得知，在元素內(nèi)部定義的變量不會(huì)影響其他元素。如此可以簡(jiǎn)單的理解成，全局變量就是定義在元素外面的變量，如下代碼：
$color: orange !default;

$color就是一個(gè)全局變量，而定義在元素內(nèi)部的變量，比如$color:red;是一個(gè)局部變量。

除此之外，Sass現(xiàn)在還提供一個(gè)!global參數(shù)。!global和 ！default 對(duì)于定義變量都是很有幫助的。我們之后將會(huì)詳細(xì)介紹這兩個(gè)參數(shù)的使用以及其功能。

1）全局變量的影子
當(dāng)在局部范圍（選擇器內(nèi)、函數(shù)內(nèi)、混合宏內(nèi)...）聲明一個(gè)已經(jīng)存在于全局范圍內(nèi)的變量時(shí)，局部變量就成為了全局變量的影子。基本上，局部變量只會(huì)在局部范圍內(nèi)覆蓋全局變量。
示例：

$color:  orange  !default;//定義全局變量
.block{
    color: $color;//調(diào)用全局變量
}
em{
    $color: red;//定義局部變量（全局變量$color的影子）
      a{
          color: $color;//調(diào)用局部變量
        }
}