在沒有css預處理器之前，在定義樣式的過程中，存在著大量的重復工作，而且維護起來比較麻煩。css預處理器中可以將重復的部分抽象出來，定義成變量、混合器等，當然，這些知識css預處理器的部分功能。Sass是css預處理器中應用最為廣泛的一種，它是層疊樣式表語言。在Sass中可以使用變量、嵌套、混合器、繼承、函數等等，Sass可編譯成對應的css樣式。

Sass知識點.png

Sass有兩種兩套語法，最早的一種使用縮進語法，使用縮進來區分代碼塊，文件擴展名為.sass。而較新的語法為"SCSS"，與css類似，使用{}來表示代碼塊，文件擴展名為.scss。本文采用scss語法。

//sass語法
$font-color: #CCCCCC
.content
    color: $font-color
//scss語法
$font-color: #CCCCCC;
.content {
    color: $font-color;
}

變量

Sass中一個重要的特性就是引入了變量，對于那些重復使用的屬性值可以定義成變量，這樣當需要修改屬性值時，只需要修改變量的值即可。

變量的定義

變量使用$符號進行定義。

$font-color: #CCCCCC;

變量的命名規則

變量名是不區分中劃線-和下劃線的_，即如果使用中劃線定義了變量$font-color，在變量引用中使用下劃線$font_color是可以的。

變量的引用

只要將屬性值換成對應的變量就可以了。

$font-color: #CCCCCC;
.content {
    color: $font-color;
}
//編譯后
.content {
    color: #CCCCCC;
}

嵌套

想必大家在css的過程中遇到過這種情況：

#content article { color: #333333; }
#content article p { font-size: 12px; }
#content article .info { color: #BCBCBC; }

#content article重復了三遍，真的很煩人。Sass中規則塊可以嵌套規則塊，從而可以只寫一遍#content article

#content article {
    color: #333333;
    p {
        font-size: 12px;
    }
    .info {
        color: #BCBCBC;
    }
}

編譯后的結果跟那段煩人的代碼是一樣的。Sass嵌套一是避免了重復選擇器，二是可以清楚的表達層級關系，使樣式可讀性更高。

父選擇器嵌套

在css中，我們經常會用到偽類，比如a標簽的:hover，那么在Sass中，該如何設置偽類的樣式呢

a {
    color: #333333;
    :hover {
        color: blue;
    }
}

是這樣嗎？這個編譯完后的樣式如下：

a { color: #333333; }
a :hover { color: blue; }

很顯然，偽類的樣式并未應用到a標簽上，而是應用到了a的后代元素上，父選擇器&可以幫我們解決這個問題。

a {
    color: #333333;
    &:hover {
        color: blue;
    }
}
//編譯后
a { color: #333333; }
a:hover { color: blue; }

群組選擇器嵌套

群組選擇器是經常使用的一種選擇器，將多個選擇器用逗號,分隔開，然后定義它們共同的樣式。

.container {
    h1, h2, h3 {
        color: #333333;
    }
}
//編譯后
.container h1, .container h2, .container h3 {
    color: #333333;
}

子組合選擇器和同層組合選擇器嵌套

div {
   > p {
     color: #f583c4;
   }
   ~ p {
     color: #8945ac;
   }
   + ul {
     color: #ac4b3a;
   }
}
//編譯后
div > p {
  color: #f583c4; }
div ~ p {
  color: #8945ac; }
div + ul {
  color: #ac4b3a; }

屬性嵌套

在Sass中，不僅選擇器可以嵌套，屬性也是可以嵌套的。border-width、border-style、border-color， 重復著"border-"部分。如果采用屬性嵌套，會這樣寫

.btn {
    border: {
        width: 2px;
        style: solid;
        color: #ccc;
    }
}
//編譯后
.btn {
  border-width: 2px;
  border-style: solid;
  border-color: #ccc; }

注意，border后面有個冒號，表示其為屬性，與選擇器區分開。

混合器

前面說到，單個樣式的重復可以使用變量。而大段樣式的重復可以使用混合器。

定義混合器

混合器使用@mixin定義，后面跟上混合器名稱。并且使用@include引入選擇器

@mixin success-tip {
  background-color: palevioletred;
  color: white;
  padding: 20px 10px;
  border: 1px solid #eee;
}
.tip {
  @include  success-tip;
}
aside .common-tip {
  @include  success-tip;
  font-size: 10px;
}
//編譯后
.tip {
  background-color: palevioletred;
  color: white;
  padding: 20px 10px;
  border: 1px solid #eee; }

aside .common-tip {
  background-color: palevioletred;
  color: white;
  padding: 20px 10px;
  border: 1px solid #eee;
  font-size: 10px; }

混合器傳參

上面的例子中，每個屬性值都是固定的，為了是混合器更加靈活，可以為混合器設置參數。

@mixin success-tip($font-color, $border-style) {
  background-color: palevioletred;
  color: $font-color;
  padding: 20px 10px;
  border: 1px #{$border-style} #eee;
}
.tip {
  @include  success-tip(#fff, solid);
}
aside .common-tip {
  @include  success-tip(#000, dotted);
  font-size: 10px;
}
//編譯后
.tip {
  background-color: palevioletred;
  color: #fff;
  padding: 20px 10px;
  border: 1px solid #eee; }

aside .common-tip {
  background-color: palevioletred;
  color: #000;
  padding: 20px 10px;
  border: 1px dotted #eee;
  font-size: 10px; }

參數默認值

為了在@include混合器時不必傳入所有的參數，我們可以給參數指定一個默認值。參數默認值使用$name: default-value的聲明形式，默認值可以是任何有效的css屬性值，甚至是其他參數的引用。

@mixin success-tip($font-color: #fff, $border-style: solid) {
  background-color: palevioletred;
  color: $font-color;
  padding: 20px 10px;
  border: 1px #{$border-style} #eee;
}
.tip {
  @include  success-tip;
}
//編譯后
.tip {
  background-color: palevioletred;
  color: #fff;
  padding: 20px 10px;
  border: 1px solid #eee; }

選擇器繼承

使用sass的時候，最后一個減少重復的主要特性就是選擇器繼承。選擇器繼承是說一個選擇器可以繼承為另一個選擇器定義的所有樣式。這個通過@extend語法實現。

.error {
    color: red;
    border: 1px solid;
}
.notice-error {
    @extend .error;
    border-width: 2px;
}
//編譯后
.error, .notice-error {
  color: red;
  border: 1px solid; }

.notice-error {
  border-width: 2px; }

從上面的例子看出，編譯后的css樣式文件中，繼承和被繼承的選擇器組合成了群組選擇器，被繼承的樣式不會重復出現。而混合器是每使用一次，編譯后混合器的樣式就會重復一次。

多重繼承

同一個選擇器可以同時繼承多個選擇器

.error {
  color: red;
  border: 1px solid;
}
.notice {
  background: #ff0;
  border: 2px solid
}
.notice-error {
  @extend .error;
  @extend .notice;
  font-size: 12px;
}
//編譯后
.error, .notice-error {
  color: red;
  border: 1px solid; }

.notice, .notice-error {
  background: #ff0;
  border: 2px solid; }

.notice-error {
  font-size: 12px; }

鏈式繼承

簡單說，就是選擇器a繼承選擇器b，選擇器b又繼承了選擇器c。

.error {
  color: red;
}
.notice-error {
    @extend .error;
    background: #ffffff;
}
.serious-error {
    @extend .notice-error;
    font-size: 12px;
}
//編譯后
.error, .notice-error, .serious-error {
  color: red; }

.notice-error, .serious-error {
  background: #ffffff; }

.serious-error {
  font-size: 12px; }

文件導入

css和Sass中都有@import規則，css中只有執行到@import時，才會去下載對應的css文件。而Sass中在生成css文件時就把相關文件導入進來。這意味著所有相關的樣式被歸納到了同一個css文件中，而無需發起額外的下載請求。另外，所有在被導入文件中定義的變量和混合器均可在導入文件中使用。

導入Sass文件

//index.scss
@mixin border-corner {
  border-radius: 10px;
}
#content {
  font-size: 12px;
}

//demo.scss
@import "index";
.error {
  color: red;
  @include border-corner;
}

//demo.scss編譯后的樣式為
#content {
  font-size: 12px; }
.error {
  color: red;
  border-radius: 10px; }

demo.scss中使用了index.scss中的混合器border-corner。

導入css文件

由于sass兼容原生的css，所以它也支持原生的CSS@import。盡管通常在sass中使用@import時，sass會嘗試找到對應的sass文件并導入進來，但在下列三種情況下會生成原生的CSS@import，盡管這會造成瀏覽器解析css時的額外下載：

• 被導入文件的名字以.css結尾；
• 被導入文件的名字是一個URL地址（比如http://www.sass.hk/css/css.css ），由此可用谷歌字體API提供的相應服務；
• 被導入文件的名字是CSS的url()值。

這就是說，你不能用sass的@import直接導入一個原始的css文件，因為sass會認為你想用css原生的@import。但是，因為sass的語法完全兼容css，所以你可以把原始的css文件改名為.scss后綴，即可直接導入了。

運算

Sass允許代碼中使用運算。

$var: 12px;
body {
  margin: (14px/2);
  top: 50px + 100px;
  right: $var - 10px;
}
//編譯后
body {
  margin: 7px;
  top: 150px;
  right: 2px; }

由于文章太長，因此控制指令、函數和注釋三部分放到了<a href="http://www.lxweimin.com/p/032011e76c46">Sass總結（二）</a>中。