一、Sass 的基本特性 - 基礎

1. 變量

• 聲明變量
  Sass 的變量包括三個部分：

  • 聲明變量的符號 “$”
  • 變量名稱（如：width）
  • 賦予變量的值（如：200px）

  如：

  $width: 200px;  
  

• 普通變量與默認變量

  • 普通變量

    $fontWeight: bold;  
    
    body {  
       font-weight: $fontWeight;  
    }
    

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

    $fontWeight: bold !default;  
    
    body {  
       font-weight: $fontWeight;  
    }
    

    覆蓋默認變量只需要在默認變量之前重新聲明下變量即可

    $fontWeight: normal; // 在默認變量之前重新聲明變量
    $fontWeight: bold !default;  
    
    body {  
       font-weight: $fontWeight;  
    }
    

• 變量的調(diào)用

  $fontWeight: bold;  
  
  body {  
     font-weight: $fontWeight; // 調(diào)用變量
  }
  

• 局部變量和全局變量
  局部變量：局部變量是擁有局部作用域的變量。只能由聲明它的函數(shù)或塊中訪問。

    $color: orange; // 定義全局變量
  
    span {
      color: $color; // 調(diào)用全局變量
    }
  

  全局變量：全局變量是在所有作用域都可訪問的變量。

    .global {
      $color: orange; // 定義局部變量
  
      p {
        color: $color; // 調(diào)用局部變量
      }
    }
  

2. 嵌套

• 選擇器嵌套

  比如有這樣一段 HTML 結構代碼：

    <header>
      <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
      </nav>
    </header>
  

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

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

  在 Sass 中使用選擇器嵌套：

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

• 屬性嵌套
  CSS 有一些屬性是前綴相同，后綴不同的，比如：
  border-top/border-bottom。

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

而 Sass 可以這樣寫：

  .border {
    border: { // 注意此處有 ":"
      top: 1px solid red;
      bottom: 1px solid green;
    }
  }

• 偽類嵌套
  偽類嵌套需要借助 "&" 符號一起配合使用，比如我們編譯下面的 CSS：

  clearfix:before, .clearfix:after {
    content: "";
    display: table;
  }
  .clearfix:after {
    clear: both;
    overflow: hidden;
  }

Sass 可以這樣寫：

  .clearfix {
    &:before,
    &:after {
      content: "";
      display: table;
    }
    &:after {
      clear: bold;
      overflow: hidden;
    }
  }

3. 混合宏

• 聲明混合宏

  • 不帶參數(shù)的混合宏：
    在 Sass 中，使用 @mixin 聲明混合宏。如：

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

  • 帶參數(shù)的混合宏：

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

• 調(diào)用混合宏
  在實際調(diào)用中，使用 @include 調(diào)用混合宏。以上面聲明的混合宏為例子：

  button {
    @include border-radius;
  }
  

  編譯好的 CSS：

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

• 混合宏的參數(shù)

  • 不帶值的參數(shù)：

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

    調(diào)用時傳入參數(shù)值：

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

  • 帶值的參數(shù)：

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

  • 多個參數(shù)

    @mixin center($width,$height){
      width: $width;
      height: $height;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -($height) / 2;
      margin-left: -($width) / 2;
    }
    

    當傳入?yún)?shù)過多時，可以使用參數(shù)"..."來替代。

• 繼承
  在 Sass 中通過 @extend 來繼承已存在的類樣式塊，如：

  .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 { /* 編譯出來的 CSS 會將選擇器合并在一起，形成組合選擇器 */
    border: 1px solid #ccc;
    padding: 6px 10px;
    font-size: 14px;
  }
  
  .btn-primary {
    background-color: #f36;
    color: #fff;
  }
  
  .btn-second {
    background-clor: orange;
    color: #fff;
  }
  

• 占位符 %placeholder
  %placeholder 聲明的代碼，如果不被 @extend 調(diào)用的話，不會產(chǎn)生任何代碼，如：

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

  以下才會產(chǎn)生代碼：

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

  編譯好的 CSS ：

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

4. Sass 運算

• 加法
  在變量和屬性中都可以做加法運算。如：

  .box {
    height: 20px + 8in;
  }
  

  編譯好的 CSS ：

  .box {
    height: 788px;
  }
  

注：攜帶不同類型的單位時，在 Sass 中計算會報錯

• 減法

  $full-width: 960px;
  $sidebar-width: 200px;
  
  .content {
    width: $full-width -  $sidebar-width;
  }
  

  編譯好的 CSS ：

  .content {
    width: 760px;
  }
  

• 乘法
  乘法運算能夠支持多種單位（em, px, %），但兩個值單位相同時，只需要為一個數(shù)值提供單位即可：

  .box {
    width: 10px / 2;
  }
  

  編譯好的 CSS ：

  .box {
    width: 5px;
  }
  

• 變量計算

  $content-width: 720px;
  $sidebar-width: 220px;
  $gutter: 20px;
  
  .container {
    width: $content-width + $sidebar-width + $gutter;
    margin: 0 auto;
  }
  

  編譯好的 CSS ：

  .container {
    width: 960px;
    margin: 0 auto;
  }
  

• 顏色運算
  顏色運算是分段運算的，也就是紅、綠、藍各顏色分段單獨運算。如：

  p {
    color: #010203 + #040506;
  }
  

  計算公式為: 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09
  編譯好的 CSS ：

  .container {
    width: 960px;
    margin: 0 auto;
  }
  

• 字符運算
  字符運算通過加法符號 "+"對字符串進行連接。如：

  $content: "Hello" + "" + "Sass!";
  .box:before {
    content: " #{$content} ";
  }
  

  編譯好的 CSS ：

  .box:before {
    content: " Hello Sass! ";
  }
  

  ---

  只有強者才懂得斗爭；弱者甚至失敗都不夠資格，而是生來就是被征服的。
  希望此文章能夠幫助你。

  歡迎關注我的博客網(wǎng)站。