1、聲明變量 $

聲明變量的符號 $

下面這張圖左半部分是scss的語法，右半部分是編譯后的css。（整篇文章皆是如此）

2、默認變量 !default

sass 的默認變量僅需要在值后面加上 !default 即可。

如果分配給變量的值后面添加了 !default 標志 ，這意味著該變量如果已經賦值，那么它不會被重新賦值，但是，如果它尚未賦值，那么它會被賦予新的給定值。

上述例子因為變量$color已經被賦值為$666，所以后來再給它賦默認值時不會影響它原來的值，$color的值仍然是$666。

3、變量調用

直接調用即可。變量聲明時也可直接調用已聲明的變量

4、局部變量和全局變量

在元素內部定義的變量不會影響其他元素

5、嵌套

5.1、選擇器嵌套

Sass 中還提供了選擇器嵌套功能，但這也并不意味著你在 Sass 中的嵌套是無節制的，因為你嵌套的層級越深，編譯出來的 CSS 代碼的選擇器層級將越深，這往往是大家不愿意看到的一點

假如有這么一個結構：

<header>
<nav><a href=“##”>Home</a><a href=“##”>About</a><a href=“##”>Blog</a>
</nav>
<header>

想選中 header 中的 a 標簽，在寫 CSS 會這樣寫：

nav a {color:red;
}header nav a {color:green;
}

那么在 Sass 中，就可以使用選擇器的嵌套來實現：

nav {a {color: red;header & {color:green;}}  
}

5.2、屬性嵌套

Sass 中還提供屬性嵌套，CSS 有一些屬性前綴相同，只是后綴不一樣，比如：border-top/border-right，與這個類似的還有 margin、padding、font 等屬性。假設你的樣式中用到了：

.box {border-top: 1px solid red;border-bottom: 1px solid green;
}

在 Sass 中我們可以這樣寫：

.box {border: {top: 1px solid red;bottom: 1px solid green;}
}

5.3、偽類嵌套

借助 &

6、混合宏

如果你的整個網站中有幾處小樣式類似，比如顏色，字體等，在 Sass 可以使用變量來統一處理，那么這種選擇還是不錯的。但當你的樣式變得越來越復雜，需要重復使用大段的樣式時，使用變量就無法達到我們目了。這個時候 Sass 中的混合宏就會變得非常有意義。

6.1、聲明

6.1.1、不帶參數混合宏

在 Sass 中，使用“ @mixin ”來聲明一個混合宏。如：

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

其中 @mixin 是用來聲明混合宏的關鍵詞，有點類似 CSS 中的 @media、@font-face 一樣。border-radius 是混合宏的名稱。大括號里面是復用的樣式代碼。

6.1.2、帶參數混合宏

除了聲明一個不帶參數的混合宏之外，還可以在定義混合宏時帶有參數，如：

@mixin border-radius($radius:5px){-webkit-border-radius: $radius;border-radius: $radius;
}

6.2、調用

在 Sass 中通過 @mixin 關鍵詞聲明了一個混合宏，那么在實際調用中，其匹配了一個關鍵詞“ @include ”來調用聲明好的混合宏。例如在你的樣式中定義了一個圓角的混合宏“border-radius”:

@mixin border-radius{-webkit-border-radius: 3px;border-radius: 3px;
}

在一個按鈕中要調用定義好的混合宏“border-radius”，可以這樣使用：

button {@include border-radius;
}

這個時候編譯出來的 CSS:

button {-webkit-border-radius: 3px;border-radius: 3px;
}

6.3、混合宏的參數

Sass 的混合宏有一個強大的功能，可以傳參，那么在 Sass 中傳參主要有以下幾種情形：

6.3.1、 傳一個不帶值的參數

在混合宏中，可以傳一個不帶任何值的參數，比如：

@mixin border-radius($radius){-webkit-border-radius: $radius;border-radius: $radius;
}

在混合宏“border-radius”中定義了一個不帶任何值的參數“$radius”。

在調用的時候可以給這個混合宏傳一個參數值：

.box {@include border-radius(3px);
}

這里表示給混合宏傳遞了一個“border-radius”的值為“3px”。

編譯出來的 CSS:

.box {-webkit-border-radius: 3px;border-radius: 3px;
}

6.3.2、傳一個帶值的參數

在 Sass 的混合宏中，還可以給混合宏的參數傳一個默認值，例如：

@mixin border-radius($radius:3px){-webkit-border-radius: $radius;border-radius: $radius;
}

在混合宏“border-radius”傳了一個參數“$radius”，而且給這個參數賦予了一個默認值“3px”。

在調用類似這樣的混合宏時，會多有一個機會，假設你的頁面中的圓角很多地方都是“3px”的圓角，那么這個時候只需要調用默認的混合宏“border-radius”:

.btn {@include border-radius;
}

編譯出來的 CSS:

.btn {-webkit-border-radius: 3px;border-radius: 3px;
}

但有的時候，頁面中有些元素的圓角值不一樣，那么可以隨機給混合宏傳值，如：

.box {@include border-radius(50%);
}

編譯出來的 CSS:

.box {-webkit-border-radius: 50%;border-radius: 50%;
}

6.4、混合宏的不足

混合宏在實際編碼中給我們帶來很多方便之處，特別是對于復用重復代碼塊。但其最大的不足之處是會生成冗余的代碼塊。比如在不同的地方調用一個相同的混合宏時。如：

@mixin border-radius{-webkit-border-radius: 3px;border-radius: 3px;
}.box {@include border-radius;margin-bottom: 5px;
}.btn {@include border-radius;
}

示例在“.box”和“.btn”中都調用了定義好的“border-radius”混合宏。先來看編譯出來的 CSS：

.box {-webkit-border-radius: 3px;border-radius: 3px;margin-bottom: 5px;
}.btn {-webkit-border-radius: 3px;border-radius: 3px;
}

上例明顯可以看出，Sass 在調用相同的混合宏時，并不能智能的將相同的樣式代碼塊合并在一起。這也是 Sass 的混合宏最不足之處。

7、擴展/繼承

在 Sass 中是通過關鍵詞 “@extend”來繼承已存在的類樣式塊，從而實現代碼的繼承。如下所示：

// SCSS
.btn {border: 1px solid #ccc;padding: 6px 10px;font-size: 14px;
}.btn-primary {background-color: #f36;color: #fff;@extend .btn;
}.btn-second {background-color: orange;color: #fff;@extend .btn;
}

編譯出來之后：

// CSS
.btn, .btn-primary, .btn-second {border: 1px solid #ccc;padding: 6px 10px;font-size: 14px;
} // 合并到了一起.btn-primary {background-color: #f36;color: #fff;
}.btn-second {background-clor: orange;color: #fff;
}

從示例代碼可以看出，在 Sass 中的繼承，可以繼承類樣式塊中所有樣式代碼，而且編譯出來的 CSS 會將選擇器合并在一起，形成組合選擇器。

8、占位符 % placeholder

它可以取代以前 CSS 中的基類造成的代碼冗余的情形。因為 %placeholder 聲明的代碼，如果不被 @extend 調用的話，不會產生任何代碼。來看一個演示：

%mt5 {margin-top: 5px;
}
%pt5{padding-top: 5px;
}

這段代碼沒有被 @extend 調用，他并沒有產生任何代碼塊，只是靜靜的躺在你的某個 SCSS 文件中。只有通過 @extend 調用才會產生代碼：

// SCSS
%mt5 {margin-top: 5px;
}
%pt5{padding-top: 5px;
}.btn {@extend %mt5;@extend %pt5;
}.block {@extend %mt5;span {@extend %pt5;}
}

編譯出來的CSS

// CSS
.btn, .block {margin-top: 5px;
}.btn, .block span {padding-top: 5px;
}

從編譯出來的 CSS 代碼可以看出，通過 @extend 調用的占位符，編譯出來的代碼會將相同的代碼合并在一起。這也是我們希望看到的效果，也讓你的代碼變得更為干凈。