Sass是一門CSS編譯語言，為CSS賦予了可編程的能力，允許我們使用變量、函數(shù)、mixin等手段來進(jìn)行模塊化的CSS開發(fā)，減少了大量冗余的代碼工作量。

1. 語法

Sass支持兩種語法

1.1 scss

SCSS語法使用.scss后綴，SCSS基本上是CSS的超集，也就是絕大多數(shù)的CSS語法都可以直接使用。因?yàn)榕cCSS語法相似，這是學(xué)習(xí)SASS最簡(jiǎn)單也最流行的一種語法。

@mixin button-base() {
  @include typography(button);
  @include ripple-surface;
  @include ripple-radius-bounded;

  display: inline-flex;
  position: relative;
  height: $button-height;
  border: none;
  vertical-align: middle;

  &:hover { cursor: pointer; }

  &:disabled {
    color: $mdc-button-disabled-ink-color;
    cursor: default;
    pointer-events: none;
  }
}

1.2 sass 縮進(jìn)語法

縮進(jìn)語法是sass的原生語法，因此使用.sass作為文件后綴。這種語法用縮進(jìn)表示花括號(hào)，空號(hào)表示花括號(hào)的結(jié)束。

@mixin button-base()
  @include typography(button)
  @include ripple-surface
  @include ripple-radius-bounded

  display: inline-flex
  position: relative
  height: $button-height
  border: none
  vertical-align: middle

  &:hover
    cursor: pointer

  &:disabled
    color: $mdc-button-disabled-ink-color
    cursor: default
    pointer-events: none

2. 文檔構(gòu)成

像大多數(shù)CSS文件一樣，Sass文件主要由樣式規(guī)則及規(guī)則的屬性構(gòu)成，除此之外還包括一些獨(dú)有的特性。

作者主要用scss語法，因此本文后續(xù)介紹中只考慮scss語法，使用sass語法的請(qǐng)自行轉(zhuǎn)換。

2.1 樣式規(guī)則

.item {
    color: green;
}

2.2 變量聲明

$bg-color: #fff;

2.3 @if語句

@if語法

@if expression {
    //CSS codes here
}

具體事例

p {
    @if $bg-color { border:1px solid; }
    @if $box-width > 100 { border: none; }
}

還可以接著很多@else

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

2.4 @each語句

語法

@each $var in <list or map>

具體示例

@each $color in red, green, yellow, blue {
    .p_#{$color} {
        background-color: #{$color}
    }
}

列表和映射還可以是二維的，如下所示

@each $color, $border in (aqua, dotted),
                        (red, solid),
                        (green, double){
  .#{$color} {
    background-color : $color;
    border: $border;
  }
}

也可以使用映射的方式

@each $header, $color in (h1: red, h2: green, h3: blue) {
  #{$header} {
    color: $color;
  }
}

2.5 @error@warn@debug

和傳統(tǒng)的編程語言一樣，在編寫sass中的mixin,function過程中，如果有變量沒有按照期望的格式傳遞，我們還可以增加錯(cuò)誤處理邏輯。

@mixin reflexive-position($property, $value) {
  @if $property != left and $property != right {
    @error "Property #{$property} must be either left or right.";
  }

  $left-value: if($property == right, initial, $value);
  $right-value: if($property == right, $value, initial);

  left: $left-value;
  right: $right-value;
  [dir=rtl] & {
    left: $right-value;
    right: $left-value;
  }
}

.sidebar {
  @include reflexive-position(top, 12px);
  //       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  // Error: Property top must be either left or right.
}

和@error類似的作用，但是@warn并不會(huì)停止sass的編譯。

$known-prefixes: webkit, moz, ms, o;

@mixin prefix($property, $value, $prefixes) {
  @each $prefix in $prefixes {
    @if not index($known-prefixes, $prefix) {
      @warn "Unknown prefix #{$prefix}.";
    }

    -#{$prefix}-#{$property}: $value;
  }
  #{$property}: $value;
}

.tilt {
  // Oops, we typo'd "webkit" as "wekbit"!
  @include prefix(transform, rotate(15deg), wekbit ms);
}

@debug我想就不用再細(xì)說了，這個(gè)語句是為了方便我們調(diào)試，將一些變量打印出來供分析運(yùn)行態(tài)的。

2.6 CSS語句

包括以下幾種：

• CSS樣式規(guī)則 h1 { font-size:xxxx; }
• @media,@font-face等CSS內(nèi)置的@規(guī)則
• @include引用的mixin
• @at-root指令，更詳細(xì)的可以參考這里，表示選擇器嵌套的最外層，對(duì)于編譯結(jié)果來說將使嵌套失效，直接移除父選擇器。。

2.7 一些頂級(jí)的聲明

• @use 通過命令加載modules，包括sass自帶的一些modules，這里面也有作用域的概念，更詳細(xì)的內(nèi)容還是參考官方文檔
• @import 應(yīng)用外部文件
• @mixin 定義mixin
• @function 定義function

3. Expressions

類似于其他語言中的變量類型或操作符的定義。

SASS中包括以下變量類型

• 數(shù)字 Numbers，可以是純數(shù)字也可以包括單位，如12px
• 字符串 Strings 可以用雙引號(hào)也可以不用雙引號(hào)，例如"Helfetica Nenu"或者bold
• 顏色 Colors 可以用預(yù)定義的縮寫或者十六進(jìn)制的寫法，例如#c6538c或green
• 布爾值 boolean ，包括true和false
• null
• 值列表，例如空格分割的值，比如padding: 1em 2em 1em 2em;
• 映射，例如"background":red, "foreground":pink

SASS中的操作符包括：

• ==和!=用于檢查兩個(gè)值是否相等
• +,-,*,%用來進(jìn)行數(shù)學(xué)運(yùn)算
• <,<=,>,>= 用來進(jìn)行兩個(gè)值大小的比較
• +,-,/用來連接字符串
• (,) 用來控制運(yùn)算的順序

4. 注釋的寫法

注釋分兩種//開頭的注釋不會(huì)編譯到CSS文件中，/**/形式的注釋會(huì)編譯到CSS中。
單行注釋以//開頭，/**/格式支持多行注釋。

// This comment won't be included in the CSS.

/* But this comment will, except in compressed mode. */

/* It can also contain interpolation:
 * 1 + 1 = #{1 + 1} */

/*! This comment will be included even in compressed mode. */

p /* Multi-line comments can be written anywhere
   * whitespace is allowed. */ .sans {
  font: Helvetica, // So can single-line commments.
        sans-serif;
}

文檔注釋

如果使用sass寫一些基本的庫，可以對(duì)mixin,functions,variables等編寫文檔注釋，通過SassDoc工具可以提取文檔。

文檔注釋以///開頭，支持Markdown語法格式。

參考資料

1. SASS Document
2. scss-@if指令
3. SCSS @if() 指令
4. scss-@each指令
5. sass @error