Sass 語法小結

時間 2019-11-16

標籤 sass 語法小結简体版

原文原文鏈接

本文主要對 Sass 的基本語法進行了小結，方便往後快速查閱使用。css

1、變量（$）

1. 變量標識符

Sass 使用 $ 符號來標識變量。前端

$highlight-color: #abcdef;
.selected {
     border: 1px $highlight-color solid;
}

2. 重複引用

在聲明變量時，變量值也能夠引用其它變量。web

$highlight-color: #abcdef;
$highlight-border: 1px $highlight-color solid;
.selected {
     border: $highlight-border;
}

2、嵌套

1. 基本嵌套

在一個規則塊中，既能夠像普通的 CSS 那樣包含屬性，又能夠嵌套其它規則塊。瀏覽器

#content {
     background-color: #f5f5f5;
     aside { 
         background-color: #eee; 
     }
}

2. 父選擇器的標識符 `&`

一是用來解決相似 :hover 這樣的僞類選擇器，二是能夠再父選擇器以前添加選擇器。sass

article a {
     color: blue;
     &:hover {     
         color: red; 
     }
}

#content aside {
     color: red;
     .feed & {
         color: green;
     }
}

3. 羣組選擇器

.container h1, 
.container h2, 
.container h3 {    // css 
    margin-bottom: .8em; 
}     

.container {       // sass
     h1, h2, h3 {margin-bottom: .8em}
}

子組合選擇器和同層組合選擇器：>、+ 和 ~。app

article section {     // 選擇article下的全部section選擇器元素
    margin: 5px;
}

article > section {     // 選擇article下緊跟着的子元素section選擇器元素
    border: 1px solid #ccc;
}

header + p {             // 選擇與header元素同層的p元素
    font-size: 1.1em
}

article ~ article {     // 選擇全部跟article後的同層article元素
    border-top: 1px dashed #ccc
}

article {             // sass的寫法，能夠從選擇符前斷開
     ~ article { 
         border-top: 1px dashed #ccc; 
     }
     > section { 
         background: #eee; 
     }
     dl > {
          dt { 
              color: #333; 
          }
          dd { 
              color: #555; 
          }
     }
     nav + & { 
         margin-top: 0; 
     }
}

4. 嵌套屬性

把屬性名從中劃線 - 的地方斷開，在根屬性後添加一個冒號 :，緊跟一個 {} 塊，把子屬性部分寫在這個 {} 塊中。ide

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

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

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

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

3、導入

1. `@import`規則

CSS 有一個特別不經常使用的特性，即 @import 規則，它容許在一個 CSS 文件中導入其它 CSS 文件。然而，後果是隻有執行到 @import 語句時，瀏覽器纔會去下載其它 CSS 文件，這致使頁面加載起來特別慢。字體
Sass 也有一個 @import 規則，但不一樣的是，Sass 的 @import 規則在生成 CSS 文件時就把相關文件導入進來。這意味着全部相關的樣式被概括到了同一個 CSS 文件中，而無需發起額外的下載請求。網站
全部在被導入文件中定義的變量和混合器都可在導入文件中使用。url
使用 Sass 的 @import 規則並不須要指明被導入文件的全名，你能夠省略 .sass、.scss文件後綴。

@import 'colors';    // colors.scss
@import 'mixins';    // mixins.scss
@import 'grid';      // grid.scss

2. 使用局部文件

有一些專爲 @import 命令而編寫的 Sass 文件，這些文件並不會編譯成對應的獨立 CSS 文件，這樣的 Sass 文件稱爲 局部文件。
局部文件的文件名如下劃線開頭，如 _night-sky.scss。
當你想用 @import 導入局部文件時，可省略文件名前面的下劃線 -，如：

@import 'themes/night-sky';    // themes/_night-sky.scss

3. 默認變量值

若是用戶在導入你的局部文件以前聲明瞭變量，那麼你的局部文件中的默認變量值就無效，不然就取默認值。

$fancybox-width: 400px !default;

.fancybox {
     width: $fancybox-width;
}

4. 嵌套導入

例如，有一個名爲 _blue-theme.scss的局部文件，內容爲：

aside {
     background: blue;
     color: white;
}

而後把它導入到一個CSS規則內，以下所示：

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

生成的結果跟你直接在 .blue-theme 選擇器內寫_blue-theme.scss文件的內容徹底同樣：

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

5. 原生的 CSS 導入

因爲 Sass 兼容原生的 CSS，因此它也只支持原生的 CSS @import，下列三種狀況都生成原生的 CSS import：

被導入的文件以 .css 結尾；
被導入文件的名字是一個 URL 地址，好比：好比http://sass-lang.com/styleshe...）；
被導入文件的名字是 CSS 的 url() 值。

另外，由於 Sass 的語法徹底兼容 CSS，因此能夠把原始的 CSS 文件更名爲 .scss 後綴，便可直接導入了。

4、註釋

1. 靜默註釋

body {
     color: #333; // 這種註釋內容不會出如今生成的css文件中（靜默註釋）
     padding: 0;  /* 這種註釋內容會出如今生成的css文件中 */
}

5、混合器

1. 定義與使用

若是你的整個網站中有幾處小小的樣式重複（例如同樣的顏色和字體），那麼使用變量來統一處理這種狀況是很是不錯的選擇（小顆粒度）。可是當你的樣式變得愈來愈複雜，你須要大段大段的重用樣式的代碼，那麼獨立的變量就沒有辦法應付這種狀況，這時候你能夠經過 Sass 的混合器（@mixin）來實現大段樣式的重用（大顆粒度）。
混合器使用 @mixin 標識符定義，而後經過 @include 來使用這個混合器。

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

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

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

2. 使用場景

判斷一組屬性是否應該組合成一個混合器，一條經驗法則就是你可否爲這個混合器想出一個好的名字。若是你能找到一個很好的名字來描述這些屬性修飾的樣式，好比 rounded-corners、fancy-font 或者 no-bullets，那麼每每可以構造一個合適的混合器。若是你找不到，這時候構造一個混合器可能並不合適（避免濫用）。

3. 混合器中的 CSS 規則

混合器不只能夠包含屬性，還能夠包含 CSS 規則，包含選擇器和選擇器中的屬性。

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

ul.plain {    // @include 調用
     color: #444;
     @include no-bullets;
}

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

4. 給混合器傳參

混合器並不必定總得生成相同的樣式，能夠經過在調用 @include 時傳參來定製混合器生成的精確樣式（跟 JavaScript 的 function 很像）。

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

a {    // @include 調用
    @include link-colors {blue, red, green};
}

a { color:blue; }    // 最終生成
a:hover { color:red; }
a:visited {color:green; }

當你使用 @include 調用混合器時，有時候可能會很難區分每一個參數是什麼意思或者參數之間是一個怎麼的順序。爲了解決這個問題，Sass 容許經過語法 $name: value 的形式指定每一個參數的值。這種形式的傳參，參數順序什麼的就沒必要在意了，只須要沒有漏掉參數便可。

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

爲了在 @include 調用混合器時沒必要傳入全部的參數，咱們能夠給參數指定一個默認值。參數默認值使用 $name: default-value 的聲明形式。默認值能夠是任何有效的 CSS 屬性值，甚至是其它參數的引用。

@mixin link-colors(     // 使用默認參數值
     $normal,
     $hover: $normal,
     $visited: $normal
) {
     color: $normal;
     &:hover { color: $hover; }
     &:visited { color: $visited; }
}

6、繼承

1. 定義和使用

sass中，選擇器繼承可讓選擇器 繼承另外一個選擇器的全部樣式，並聯合聲明。使用選擇器的繼承，要使用關鍵詞 @extend，後面緊跟須要繼承的選擇器。

h1{    // sass
  border: 4px solid #ff9aa9;
}
.speaker{
  @extend h1;
  border-width: 2px;
}

h1,.speaker{    // css
  border: 4px solid #ff9aa9;
}
.speaker{
  border-width: 2px;
}