常見的CSS預處理器之Sass初體驗

Sass

Sass（英文全稱：Syntactically Awesome Stylesheets）是一個最初由Hampton Catlin設計並由Natalie Weizenbaum開發的層疊樣式表語言。

Sass是一個將腳本解析成CSS的腳本語言，即SassScript，它包括兩套語法。最開始的語法叫「縮進語法」，使用縮進來區分代碼塊而且用回車將不一樣規則隔開；而較新的語法叫作「SCSS」，使用CSS同樣的語法塊也就是大括號將不一樣規則分開，用分號將具體樣式分開。一般狀況下這兩套語法是經過.sass 和 .scss 兩個文件擴展名來區分的。

對於Sass的基本使用，咱們須要從嵌套、變量、函數、繼承和高階屬性這幾方面來一一瞭解。

1 環境的佈置

• 安裝Ruby環境，在官網http://rubyinstaller.org上找到最新的安裝包，而後按照指示一步一步的操做，安裝的過程可能會比較慢。有兩點須要注意的是：

  1 勾選UTF-8的選項，若是忘記了的話也能夠在安裝完以後來更改Sass的默認編碼，方法以下：

  到Ruby22\lib\ruby\gems\x.x.x\gems\sass-x.x.xx\lib\sass目錄下
      Encoding.default_external = Encoding.find('utf-8')

  2 在安裝快要完成時，須要把圖片中的選項去掉不勾選，若是這一步忘了咱們能夠直接把安裝的過程關閉。

• 安裝Sass 安裝完以後，咱們須要更改Ruby源，更改爲淘寶源：

  gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/

  查看源

  gem sources -l

  安裝Sass

  gem install sass

  查看版本

  sass -v

2 Sass 和 SCSS

• SCSS是sass的一個升級版本，前者徹底兼容後者
• Sass是靠縮進表示嵌套關係，SCSS是花括號

具體語法上面的差別

SCSS語法：

$width: 100%;
$height: 100px;
$color: red;
.container{
  width: $width;
  height: $height;
  background-color: $color;
  margin-bottom: 5px;
}
.container2{
  width: $width;
  height: $height;
  background-color: $color;
  margin-bottom: 5px;
}
.container3{
  width: $width;
  height: $height;
  background-color: $color;
  margin-bottom: 5px;
}

Sass 語法：

!primary-color= hotpink
=border-radius(!radius)
    -webkit-border-radius= !radius
    -moz-border-radius= !radius
    border-radius= !radius
.my-element
    color= !primary-color
    width= 100%
    overflow= hidden
.my-other-element
    +border-radius(5px)

3 編譯 .scss 文件

sass main.scss main.css

Sass 編譯語法和 Less編譯語法有必定的類似性；不一樣的是Sass其實是支持編譯風格的以及文件偵聽。

咱們加上一個 -- style 的屬性就能夠指定編譯風格，它的編譯風格一共有四種：

sass --style compressed main.sass main.css

• nested 嵌套縮進的css代碼
• expanded 沒有縮進
• compact 簡潔格式
• compressed 壓縮

文件偵聽的意思就是說咱們監聽的某一個文件它有變更的時候，而後咱們在保存的時候會自動把它編譯成對應的css。

監聽文件
    sass --watch main.scss:main.css
    監聽文件夾
    sass --watch xxxx/sass:xxxxx/xxxxx

4 Sass基本語法

Sass嵌套

• Sass 寫法

  .container {
      padding: 0;
      .header {
          background-color: red;
      }
  }

• 僞類寫法

  #header {
    &:after {
      content: " ";
      display: block;
      font-size: 0;
      height: 0;
      clear: both;
      visibility: hidden;
    }
  }

  Sass的嵌套相較於Less有一個不一樣的地方在於，在僞類中能夠實現一個屬性的嵌套，好比在Sass中下面樣式： p { border: { color: red; } } 在css中編譯出來的是： p{ border-color:red; }

Sass 變量

sass的變量與less比較有必定的不一樣，在less中是以@ 符號開頭的，而在sass中則是$ 美圓符號，其餘部分沒有區別。

• sass 也是用 js 的寫法來寫 css
• 使用 $ 符號定義變量
• $變量名 當作是一個字符串

  $width: 100%;
  $height: 100px;
  $color: blue;
  $direction: left;
  .border {
    border-#{$direction}: solid 5px;
  }

Sass 函數

在sass中函數要加上一個@function

[@function](https://my.oschina.net/u/569418) double($x, $y, $z) {
  [@return](https://my.oschina.net/u/556800) $x * $y * $z;
}
#header{
  width: double(5, 5, 5px);
}

編譯成css：
#header{
	width:125px;
}

內置函數

• unquote 去引號

• percentage 百分比

• index 計算位置 .header { width: index(1px solid red, 1px); }

  編譯成css：
  .header{
      width:1px;
  }

• mix 混合顏色 mix (color, color, ratio);

• lightness 獲取亮度值

Sass 註釋 ``` // 普通註釋 // 只在源文件出現，編譯以後就不存在了

/*
*　註釋
*  compressed的style的css中沒有
*/

/*！
*　重要註釋
*  任何style的css文件中都會有，即便編譯混淆，註釋仍然存在
*/
```

Sass 計算屬性

body {
    　　margin: (14px/2);
    　　top: 50px + 100px;
    　　right: $var * 10%;
    }

Sass 繼承

• extend

  .header {
      border: 1px solid #ddd;
    }
    .body {
      @extend .header;
    }
  
    編譯後的css：
    .header,body{
        border:1px solid #ddd;
    }

• mixin

  @mixin common {
       background-color: red;
     }
     .header{
       font-size: 16px;
       @include common;
     }
     編譯後的css：
     .header{
         font-size:16px;
         background-color:red;
     }

  咱們也能夠向JS更進一步，把mixin寫成一個函數，再加一個默認值：

  @mixin default($x, $y, $z: 12px){
     margin-left: $x;
     margin-right: $y;
     margin-top: $z;
   }
   .header {
     @include default(5px, 5px);
   }
  
   編譯後的css：
   .header {
     margin-left: 5px;
     margin-right: 5px;
     margin-top: 12px; 
   }

Sass 引入

Sass的引入和Less是同樣的，都是加上一個@import 「.scss文件名」。

進階屬性

• @（運算）

  .header {
     @if 10 == 10 { color: red; }
     @if 10 < 20 { color: red; }
   }

• else顏色值比較以突出文字

  .header {
     @if 10 == 11 { color: red; }
     @else  { color: green; }
   }

• 循環（分爲三個） 1 for 2 while 3 ench

  @for $index 變量從一到一百，把1.jpg到100.jpg生成100個不一樣的背景顏色：

  @for $index from 1 to 100 {
     .background-#{$index} {
         background-image: url("/image/#{$index}.jpg");
     }
   }

  while 打印四個數，定義了一個變量爲20px，依次4次輸出結果：

  $types: 4;
   $type-width: 20px;
   @while $types > 0 {
     .while-#{$types}{
     width: $type-width + $types;
   }
     $types: $types - 1;
   }

  each 遍歷三種顏色：

  @each $item in red, green, yellow {
     .#{$item} {
       color: $item;
     }
   }

Sass 優點和劣勢

優勢：

• 擴展了CSS3，增長了規則、變量、混入、選擇器、繼承等屬性
• Sass生成良好的格式化CSS代碼
• 易於組織和維護
• Sass生態環境完善
• Sass功能上較強於Less
• Sass有豐富的sass庫：Compass/Bourbon

缺點：

• 不能在瀏覽器中運行