變量的操作分為兩種：一、直接操作變量（即變量表達(dá)式）；二、通過函數(shù)。

函數(shù)又分為兩種：一、跟代碼塊無關(guān)的函數(shù)，多是自己的內(nèi)置函數(shù)，稱functions；二、可重用的代碼塊，稱mixin，類似于C語言中的宏。

mixin又細(xì)分為兩種概念：一、使用時(shí)以賦值拷貝的方式存在的，通過@include方式調(diào)用；二、使用時(shí)以組合聲明的方式存在的，通過@extend的方式調(diào)用。

變量表達(dá)式和functions

兩者的使用范圍都較窄，歪果仁關(guān)于表達(dá)式變量的例子經(jīng)常是下面這個(gè)樣子的：

p {
  height: (500px / 2);
}

從這個(gè)例子中可以看出兩點(diǎn)：一、歪果仁的數(shù)學(xué)不咋地；二、變量表達(dá)式的運(yùn)算可以帶單位。

Sass官網(wǎng)上列出了所有的functions，看這里 。比如hsl()，HSL是CSS3新增的顏色表示模式，HSL就是色調(diào)(Hue)、飽和度(Saturation)和亮度(Lightness)的縮寫。Sass是CSS的超集，所以當(dāng)然也支持這種模式?？梢酝ㄟ^@functions聲明函數(shù)。

mixin：@include

定義

mixin的定義以@mixin開頭，如下：

@mixin col-6 {
  width: 50%;
  float: left;
}

也可以增加參數(shù)信息使mixin更具有可配置性，如下：

@mixin col($width) {
  width: $width;
  float: left;
}

當(dāng)然，mixin也支持默認(rèn)參數(shù)，如下：

@mixin col($width:50%) {
  width: $width;
  float: left;
}

使用

也許你會(huì)說，mixin代碼塊的定義是如此簡單，那么，你可能會(huì)覺得代碼塊的使用更簡單，只需要使用@include引入即可，如下：

@include col-6();
@include col(25%);

mixin：@extend

場景介紹

首先考慮一個(gè)樣式正交性的問題，設(shè)想這樣一個(gè)場景，假設(shè)你有下面兩個(gè)div：

<div class="error">今天沒有學(xué)習(xí)!!!!</div>
<div class="serious-error">這兩天都沒有學(xué)習(xí)?。?！</div>

現(xiàn)在你想讓error類顯示紅色的字體，而serious-error類除了字體為紅色之外，還要有一個(gè)紅色的邊框，那么你可能會(huì)這樣設(shè)計(jì)兩個(gè)類的樣式，然后再給serious-error的div增加一個(gè)error類名。

.error {
  color: #f00;
}
.serious-error {
  border: 1px solid #f00;
}

或者這樣設(shè)計(jì)類的樣式：

.error {
  color: #f00;
}
.serious-error {
  color: #f00;
  border: 1px solid #f00;
}

顯然，這兩種做法都不太好，冗余，不好維護(hù)。

extend登場

Sass的extend屬性可以幫助我們解決這個(gè)問題，明確指定一個(gè)類去繼承另一個(gè)類的樣式。

.serious-error {
  @extend .error;
  border: 1px solid #f00;
}

編譯生成的css文件如下：

.error, .serious-error {
  color: #f00;
}
.serious-error {
  border: 1px solid #f00;
}

extend工作的原理很簡單，就是把繼承者的選擇器（.serious-error）插入到被繼承者的選擇器（.error）出現(xiàn)的地方。

繼承多個(gè)和連續(xù)繼承

繼承多個(gè)類的情況下，可以寫多個(gè)extend，每個(gè)后面跟一個(gè)類名，也可以寫一個(gè)extend，后面的類名以逗號(hào)分隔。

連續(xù)繼承也很簡單，如下，存在多個(gè)繼承和連續(xù)繼承的情況：

.error {
  color: #f00;
}
.normal {
  font-size: 15px;
}
.serious-error {
  @extend .error, .normal;
  border: 1px solid #f00;
}

.dead-error {
  @extend .serious-error;
  border-color: #000;
}

extend的兩個(gè)知識(shí)點(diǎn)

1. extend不可以繼承選擇器系列

   .A .B { 
     color: #f00;
   }
   .C { 
     @extend .A .B; //錯(cuò)誤的
   }
   

   但是這樣做卻是可以的，雖然你可能并不想要這樣的效果。

   .A .B { 
     color: #f00;
   }
   .C { 
     @extend .B;
   }
   .D {
     @extend .A;
   }
   

   生成的CSS代碼如下：

   .A .B, .D .B, .A .C, .D .C {
     color: #000;
   }
   

2. 可以使用%，用來構(gòu)建只用來繼承的選擇器。

   %error {
     color: #f00;
   }
   .serious-error {
     @extend %error;
     border: 1px solid #f00;
   }
   

   error的樣式不會(huì)輸出到生成的css文件里。

文字資料來自慕課網(wǎng)課程