Sass 是一款強(qiáng)化 CSS 的輔助工具，它在 CSS 語(yǔ)法的基礎(chǔ)上增加了變量 (variables)、嵌套 (nested rules)、混合 (mixins)、導(dǎo)入 (inline imports) 等高級(jí)功能，這些拓展令 CSS 更加強(qiáng)大與優(yōu)雅。使用 Sass有助于更好地組織管理樣式文件，以及更高效地開(kāi)發(fā)項(xiàng)目。

• 變量
  sass使用$符號(hào)來(lái)標(biāo)識(shí)變量，你可以把反復(fù)使用的css屬性值定義成變量，然后通過(guò)變量名來(lái)引用它們，而無(wú)需重復(fù)書(shū)寫這一屬性值，這對(duì)于維護(hù)來(lái)說(shuō)很方便，只需修改一處即可。
  sass源文件

    $highlight-color: #f90 !default;  // !default表示變量默認(rèn)值
    $highlight-border: 1px solid $highlight-color;
    .selected {
      border: $highlight-border;
    }
  

  編譯之后的css

    .selected {
      border: 1px solid #f90;
    }
  

• 嵌套
  sass 允許將一套css樣式嵌套進(jìn)另一套樣式中，內(nèi)層的樣式將它外層的選擇器作為父選擇器。&代表父選擇器。
  sass源文件

    #content {
      article {
        h1 {
          color: #333;
        }
        p {
          margin-bottom: 1.4em;
        }
      }
      aside {
        background-color: #eee;
      }
  
    article a {
      color: blue;
      &:hover {
        color: red;
      }
    }
    
  

  編譯之后的css

    #content article h1 {
      color: #333;
    }
  
    #content article p {
      margin-bottom: 1.4em;
    }
  
    #content aside {
      background-color: #eee;
    }
  
    article a {
      color: blue;
    }
    article a:hover {
      color: red;
    }
  

• 混合器
  sass的混合器實(shí)現(xiàn)大段樣式的重用，混合器使用@mixin標(biāo)識(shí)符定義。然后就可以在你的樣式表中通過(guò)@include來(lái)使用這個(gè)混合器，放在你希望的任何地方。
  sass源文件

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

  編譯之后的css

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

• 繼承
  sass使用@extend來(lái)實(shí)現(xiàn)繼承。@extend背后最基本的想法是，如果.seriousError @extend .error， 那么樣式表中的任何一處.error都用.error ,.seriousError這一選擇器組進(jìn)行替換。
  sass源文件

    .error {
      border: 1px solid red;
      background-color: #fdd;
    }
    .error a {
      color: red;
      font-weight: 100;
    }
    .seriousError {
      @extend .error;
      border-width: 3px;
    }
  

  編譯之后的css

    .error,
    .seriousError {
      border: 1px solid red;
      background-color: #fdd;
    }
  
    .error a,
    .seriousError a {
      color: red;
      font-weight: 100;
    }
  
    .seriousError {
      border-width: 3px;
    }
  

• 注釋

    body {
      color: #333; // 這種注釋內(nèi)容不會(huì)出現(xiàn)在生成的css文件中
      padding: 0; /* 這種注釋內(nèi)容會(huì)出現(xiàn)在生成的css文件中 */
    }
  

  編譯之后的css

    body {
      color: #333;
      padding: 0;
      /* 這種注釋內(nèi)容會(huì)出現(xiàn)在生成的css文件中 */
    }
  

• 導(dǎo)入
  sass也有一個(gè)@import規(guī)則，那些專門為@import命令而編寫的sass文件，并不需要生成對(duì)應(yīng)的獨(dú)立css文件，這樣的sass文件稱為局部文件。sass局部文件的文件名以下劃線開(kāi)頭。當(dāng)你@import一個(gè)局部文件時(shí)，還可以不寫文件的全名，即省略文件名開(kāi)頭的下劃線。

  //2.scss
    .center {
      text-align: center;
    }
    //1.scss
    @import "2";
  

  編譯之后的css

    .center {
      text-align: center;
    }
  

• 后綴
  sass 有兩種后綴名文件：一種后綴名為 sass，不使用大括號(hào)和分號(hào)；另一種就是我們這里使用的 scss 文件，使用大括號(hào)和分號(hào)。建議使用后綴名為 scss 的文件。
• 函數(shù)
  使用@function定義函數(shù)，可以含有多條語(yǔ)句，需要調(diào)用 @return 輸出結(jié)果。建議在自定義函數(shù)前添加前綴避免命名沖突。

    @function c_pxToem($px) {
      @return $px/16px + em;
    }
    .title {
      width: c_pxToem(32px);
    }
  

  編譯之后的css

    .title {
      width: 2em;
    }
  

• 運(yùn)算
  • 支持?jǐn)?shù)字的加減乘除、取整等運(yùn)算。
  • +可用于連接字符串。
  • #{}插值語(yǔ)句可以在選擇器或?qū)傩悦惺褂米兞俊?/li>
  • 注意：/ 被視為除法運(yùn)算符號(hào)只有三種情況
    1. 如果值被圓括號(hào)包裹
    2. 如果值，或值的一部分，是變量或者函數(shù)的返回值
    3. 如果值是算數(shù)表達(dá)式的一部分

    $border: 2px;
    .title {
      height: 20px + 10px;
      width: 100px - 50px;
      line-height: 15 * 2px;
      padding: 10px / (2);
      margin: 5px + 10px/2;
      border: $border/2 solid red;
    }
    p:before {
      content: "Foo " + Bar;
      font-family: sans- + "serif";
    }
    p:after {
      content: "I ate #{$border} pies!";
    }
  

  編譯之后的css

    .title {
      height: 30px;
      width: 50px;
      line-height: 30px;
      padding: 5px;
      margin: 10px;
      border: 1px solid red;
    }
  
    p:before {
      content: "Foo Bar";
      font-family: sans-serif;
    }
  
    p:after {
      content: "I ate 2px pies!";
    }