sass和less的幾點不同

1.申明和使用變量

sass使用$符號來標識變量(老版本的sass使用!來標識變量），比如$highlight-color和$sidebar-width。

與CSS屬性不同，變量可以在css規則塊定義之外存在。當變量定義在css規則塊內，那么該變量只能在此規則塊內使用。如果它們出現在任何形式的{...}塊中（如@media或者@font-face塊），情況也是如此：

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

//編譯后

nav {
  width: 100px;
  color: #F90;
}

2、變量名用中划線還是下划線分隔

sass的變量名可以與css中的屬性名和選擇器名稱相同，包括中划線和下划線，sass中兩種方式相同。

 

3.屬性嵌套

nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}

嵌套屬性的規則是這樣的：把屬性名從中划線-的地方斷開，在根屬性后邊添加一個冒號:，緊跟一個{ }塊，把子屬性部分寫在這個{ }塊中。就像css選擇器嵌套一樣，sass會把你的子屬性一一解開，把根屬性和子屬性部分通過中划線-連接起來，最后生成的效果與你手動一遍遍寫的css樣式一樣：

 

nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

 

對於屬性的縮寫形式，你甚至可以像下邊這樣來嵌套，指明例外規則：

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}
//這比下邊這種同等樣式的寫法要好：

nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

4.和css@import的區別

css有一個特別不常用的特性，即@import規則，它允許在一個css文件中導入其他css文件。然而，后果是只有執行到@import時，瀏覽器才會去下載其他css文件，這導致頁面加載起來特別慢。

sass也有一個@import規則，但不同的是，sass的@import規則在生成css文件時就把相關文件導入進來。這意味着所有相關的樣式被歸納到了同一個css文件中，而無需發起額外的下載請求。

使用sass的@import規則並不需要指明被導入文件的全名。你可以省略.sass或.scss文件后綴

 

5.使用SASS部分文件

當通過@import把sass樣式分散到多個文件時，你通常只想生成少數幾個css文件。那些專門為@import命令而編寫的sass文件，並不需要生成對應的獨立css文件，這樣的sass文件稱為局部文件。對此，sass有一個特殊的約定來命名這些文件。

此約定即，sass局部文件的文件名以下划線開頭。這樣，sass就不會在編譯時單獨編譯這個文件輸出css，而只把這個文件用作導入。當你@import一個局部文件時，還可以不寫文件的全名，即省略文件名開頭的下划線。

 

這一條和less一樣。

 

6.默認變量值

一般情況下，你反復聲明一個變量，只有最后一處聲明有效且它會覆蓋前邊的值。舉例說明：

$link-color: blue;
$link-color: red;
a {
color: $link-color;
}

在上邊的例子中，超鏈接的color會被設置為red。

使用sass的!default標簽可以實現這個目的。它很像css屬性中!important標簽的對立面，不同的是!default用於變量，含義是：如果這個變量被聲明賦值了，那就用它聲明的值，否則就用這個默認值。

7.嵌套導入

跟原生的css不同，sass允許@import命令寫在css規則內。這種導入方式下，生成對應的css文件時，局部文件會被直接插入到css規則內導入它的地方。舉例說明，有一個名為_blue-theme.scss的局部文件，內容如下：

 aside { 2 background: blue; 3 color: white; 4 } 

然后把它導入到一個CSS規則內，如下所示：

.blue-theme {@import "blue-theme"}

//生成的結果跟你直接在.blue-theme選擇器內寫_blue-theme.scss文件的內容完全一樣。

.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}

8.靜默注釋

sass另外提供了一種不同於css標准注釋格式/* ... */的注釋語法，即靜默注釋，其內容不會出現在生成的css文件中。靜默注釋的語法跟JavaScriptJava等類C的語言中單行注釋的語法相同，它們以//開頭，注釋內容直到行末。

body {
  color: #333; // 這種注釋內容不會出現在生成的css文件中
  padding: 0; /* 這種注釋內容會出現在生成的css文件中 */
}

 

9.混合器 △△△

如果你的整個網站中有幾處小小的樣式類似（例如一致的顏色和字體），那么使用變量來統一處理這種情況是非常不錯的選擇。但是當你的樣式變得越來越復雜，你需要大段大段的重用樣式的代碼，獨立的變量就沒辦法應付這種情況了。你可以通過sass的混合器實現大段樣式的重用。

混合器使用@mixin標識符定義。看上去很像其他的CSS @標識符，比如說@media或者@font-face。這個標識符給一大段樣式賦予一個名字，這樣你就可以輕易地通過引用這個名字重用這段樣式。下邊的這段sass代碼，定義了一個非常簡單的混合器，目的是添加跨瀏覽器的圓角邊框。

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

然后就可以在你的樣式表中通過@include來使用這個混合器，放在你希望的任何地方。@include調用會把混合器中的所有樣式提取出來放在@include被調用的地方。如果像下邊這樣寫：

notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

//sass最終生成：

.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

在.notice中的屬性border-radius-moz-border-radius和-webkit-border-radius全部來自rounded-corners這個混合器。

10.何時使用

判斷一組屬性是否應該組合成一個混合器，一條經驗法則就是你能否為這個混合器想出一個好的名字。

如果你找不到，這時候構造一個混合器可能並不合適。

有時候僅僅把屬性放在混合器中還遠遠不夠，可喜的是，sass同樣允許你把css規則放在混合器中。

11.混合器中的CSS規則

混合器中不僅可以包含屬性，也可以包含css規則，包含選擇器和選擇器中的屬性，如下代碼:

@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}

當一個包含css規則的混合器通過@include包含在一個父規則中時，在混合器中的規則最終會生成父規則中的嵌套規則。舉個例子，看看下邊的sass代碼，這個例子中使用了no-bullets這個混合器：

ul.plain {
  color: #444;
  @include no-bullets;
}
//sass的@include指令會將引入混合器的那行代碼替換成混合器里邊的內容。 
//最終，上邊的例子如下代碼:

ul.plain {
  color: #444;
  list-style: none;
}
ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

混合器中的規則甚至可以使用sass的父選擇器標識符&。使用起來跟不用混合器時一樣，sass解開嵌套規則時，用父規則中的選擇器替代&。

12.給混合器傳參

@include混合器時，參數其實就是可以賦值給css屬性值的變量

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

當你@include混合器時，有時候可能會很難區分每個參數是什么意思，參數之間是一個什么樣的順序。為了解決這個問題，sass允許通過語法$name: value的形式指定每個參數的值。這種形式的傳參，參數順序就不必再在乎了，只需要保證沒有漏掉參數即可：

a {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}

13.默認參數值

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

 

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

14.使用選擇器繼承來精簡CSS

通過@extend語法實現

//通過選擇器繼承繼承樣式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

在上邊的代碼中，.seriousError將會繼承樣式表中任何位置處為.error定義的所有樣式。以class="seriousError" 修飾的html元素最終的展示效果就好像是class="seriousError error"。相關元素不僅會擁有一個3px寬的邊框，而且這個邊框將變成紅色的，這個元素同時還會有一個淺紅色的背景，因為這些都是在.error里邊定義的樣式。

.seriousError不僅會繼承.error自身的所有樣式，任何跟.error有關的組合選擇器樣式也會被.seriousError以組合選擇器的形式繼承，如下代碼:

//.seriousError從.error繼承樣式
.error a{  //應用到.seriousError a
  color: red;
  font-weight: 100;
}
h1.error { //應用到hl.seriousError
  font-size: 1.2rem;
}

15.何時使用繼承

當一個元素擁有的類（比如說.seriousError）表明它屬於另一個類（比如說.error），這時使用繼承再合適不過了。結合Java、php的繼承

16.繼承的高級用法

任何css規則都可以繼承其他規則，幾乎任何css規則也都可以被繼承。大多數情況你可能只想對類使用繼承，但是有些場合你可能想做得更多。最常用的一種高級用法是繼承一個html元素的樣式。盡管默認的瀏覽器樣式不會被繼承，因為它們不屬於樣式表中的樣式，但是你對html元素添加的所有樣式都會被繼承。

接下來的這段代碼定義了一個名為disabled的類，樣式修飾使它看上去像一個灰掉的超鏈接。通過繼承a這一超鏈接元素來實現：

 .disabled { 2 color: gray; 3 @extend a; 4 } 

假如一條樣式規則繼承了一個復雜的選擇器，那么它只會繼承這個復雜選擇器命中的元素所應用的樣式。舉例來說， 如果[e-mail] ， 那么.important.error 和h1.important.error 的樣式都會被.seriousError繼承， 但是.important或者.error下的樣式則不會被繼承。這種情況下你很可能希望.seriousError能夠分別繼承.important或者.error下的樣式。

如果一個選擇器序列（#main .seriousError）@extend另一個選擇器（.error），那么只有完全匹配#main .seriousError這個選擇器的元素才會繼承.error的樣式，就像單個類 名繼承那樣。擁有class="seriousError"的#main元素之外的元素不會受到影響。

像#main .error這種選擇器序列是不能被繼承的。這是因為從#main .error中繼承的樣式一般情況下會跟直接從.error中繼承的樣式基本一致，細微的區別往往使人迷惑。

現在你已經了解了通過繼承能夠做些什么事情，接下來我們將學習繼承的工作細節，在生成對應css的時候，sass具體干了些什么事情。

17.繼承的工作細節

跟變量和混合器不同，繼承不是僅僅用css樣式替換@extend處的代碼那么簡單。為了不讓你對生成的css感覺奇怪，對這背后的工作原理有一定了解是非常重要的。

@extend背后最基本的想法是，如果.seriousError @extend .error， 那么樣式表中的任何一處.error都用.error.seriousError這一選擇器組進行替換。這就意味着相關樣式會如預期那樣應用到.error和.seriousError。當.error出現在復雜的選擇器中，比如說h1.error.error a或者#main .sidebar input.error[type="text"]，那情況就變得復雜多了，但是不用擔心，sass已經為你考慮到了這些。

關於@extend有兩個要點你應該知道。

• 跟混合器相比，繼承生成的css代碼相對更少。因為繼承僅僅是重復選擇器，而不會重復屬性，所以使用繼承往往比混合器生成的css體積更小。如果你非常關心你站點的速度，請牢記這一點。
• 繼承遵從css層疊的規則。當兩個不同的css規則應用到同一個html元素上時，並且這兩個不同的css規則對同一屬性的修飾存在不同的值，css層疊規則會決定應用哪個樣式。相當直觀：通常權重更高的選擇器勝出，如果權重相同，定義在后邊的規則勝出。

混合器本身不會引起css層疊的問題，因為混合器把樣式直接放到了css規則中，而繼承存在樣式層疊的問題。被繼承的樣式會保持原有定義位置和選擇器權重不變。通常來說這並不會引起什么問題，但是知道這點總沒有壞處。

18.使用繼承的最佳實踐

通常使用繼承會讓你的css美觀、整潔。因為繼承只會在生成css時復制選擇器，而不會復制大段的css屬性。但是如果你不小心，可能會讓生成的css中包含大量的選擇器復制。

避免這種情況出現的最好方法就是不要在css規則中使用后代選擇器（比如.foo .bar）去繼承css規則。如果你這么做，同時被繼承的css規則有通過后代選擇器修飾的樣式，生成css中的選擇器的數量很快就會失控：

 .foo .bar { @extend .baz; } 2 .bip .baz { a: b; } 

在上邊的例子中，sass必須保證應用到.baz的樣式同時也要應用到.foo .bar（位於class="foo"的元素內的class="bar"的元素）。例子中有一條應用到.bip .baz（位於class="bip"的元素內的class="baz"的元素）的css規則。當這條規則應用到.foo .bar時，可能存在三種情況，如下代碼:

<!-- 繼承可能迅速變復雜 -->
<!-- Case 1 -->
<div class="foo">
  <div class="bip">
    <div class="bar">...</div>
  </div>
</div>
<!-- Case 2 -->
<div class="bip">
  <div class="foo">
    <div class="bar">...</div>
  </div>
</div>
<!-- Case 3 -->
<div class="foo bip">
  <div class="bar">...</div>
</div>

為了應付這些情況，sass必須生成三種選擇器組合（僅僅是.bip .foo .bar不能覆蓋所有情況）。如果任何一條規則里邊的后代選擇器再長一點，sass需要考慮的情況就會更多。實際上sass並不總是會生成所有可能的選擇器組合，即使是這樣，選擇器的個數依然可能會變得相當大，所以如果允許，盡可能避免這種用法。

值得一提的是，只要你想，你完全可以放心地繼承有后代選擇器修飾規則的選擇器，不管后代選擇器多長，但有一個前提就是，不要用后代選擇器去繼承。

 

小結

 

本文介紹了sass最基本部分,你可以輕松地使用sass編寫清晰、無冗余、語義化的css。對於sass提供的工具你已經有了一個比較深入的了解，同時也掌握了何時使用這些工具的指導原則。

變量是sass提供的最基本的工具。通過變量可以讓獨立的css值變得可重用，無論是在一條單獨的規則范圍內還是在整個樣式表中。變量、混合器的命名甚至sass的文件名，可以互換通用_和-。同樣基礎的是sass的嵌套機制。嵌套允許css規則內嵌套css規則，減少重復編寫常用的選擇器，同時讓樣式表的結構一眼望去更加清晰。sass同時提供了特殊的父選擇器標識符&，通過它可以構造出更高效的嵌套。

你也已經學到了sass的另一個重要特性，樣式導入。通過樣式導入可以把分散在多個sass文件中的內容合並生成到一個css文件，避免了項目中有大量的css文件通過原生的css @import帶來的性能問題。通過嵌套導入和默認變量值，導入可以構建更強有力的、可定制的樣式。混合器允許用戶編寫語義化樣式的同時避免視覺層面上樣式的重復。你不僅學到了如何使用混合器減少重復，同時學習到了如何使用混合器讓你的css變得更加可維護和語義化。最后，我們學習了與混合器相輔相成的選擇器繼承。繼承允許你聲明類之間語義化的關系，通過這些關系可以保持你的css的整潔和可維護性。

 

參考鏈接：https://www.sass.hk/guide/