強悍的 CSS 擴充語言 -- Sass

標籤：

<div class = ‘testBorder‘>   <p>        <input/>           </p></div>

假設上面這 3 個 DOM 元素有這樣的需求， div 去邊框， p 顯示邊框， input 只顯示底部邊框, 而且統一用 !important 關鍵字提高樣式的優先權；

如果手寫純 CSS 會是這樣：

.testBorder{   border:none !important;   }.testBorder p{   border:1px solid !important;}.testBorder p input{   border-width:0 0 1px 0 !important;   border-style: solid !important;   }

會發現，有重複的代碼".testBorder", ".testBorder p", "!important"。 這隻是簡單的需求，如果項目龐大對樣式的需求複雜，這樣手寫 CSS 和搬磚真沒區別；

而換用 Sass 來寫：

$imp: !important; /*定義變數*/
.testBorder{   border:none $imp;   p{      border:1px solid $imp;      input{         border-width:0 0 1px 0 $imp;         border-style:solid $imp;      }   }}

 代碼可嵌套了；

 

CSS 是層疊樣式表，不是語言，缺乏程式設計語言中強大的特性：變數、函數、運算、迴圈、判斷、繼承等；

而它的擴充語言 Sass 就支援這些特性，Sass 讓我們用編程方式來寫 CSS 代碼從而提高效率節約程式員的時間；

Sass 的官網：http://sass-lang.com/，  裡面文檔非常精確齊全，都不用再看其它介紹文章了，顯示得多餘。文檔雖然是雞腸，但都是比較常用的單詞，且還有例子，基本能看明白；

下面就最近自己常用的 Sass 知識點做下簡要的記錄，方便以後複習；

1.變數

定義變數 "$[name]: [value];"

$columnCount: 5; /*數字*/$columnWidth: 100px;/*樣式*/$columnClassName: ‘column‘;/*字串*/$domTypeArr: (‘input‘,‘select‘,‘div‘);/*數組*/$canExtend:true; /*布爾*/

 

2.函數、判斷

定義函數： "@function [funcName]([parameters]){//doSth}"

調用方式： [functionName]([parameter]);

@function extendWidth($width){   @if($width < 1){      @return 50px;   }@else{      @return $width * 50px;   }}

上面加粗的代碼就是判斷，和 js 的判斷一樣，區別只是關鍵字前面要加 @字元，如 @if  @else

 

3.混合指令 @Mixin ， 迴圈for

Mixin 不知怎麼翻譯，搜了一遍翻譯為 "混合指令"， 作用是把一串 css 包在一起，供調用；

定義： "@mixin [mixinName]([parameters]){//sth css}", ([parameter]) 括弧和parameter 是可選的，即沒有參數時可不加括弧(); 

調用方式： @include [mixinName]([parameter])

@mixin push($pushWidth){   $_extendPushWidth: $pushWidth + 10px; /*定義內部變數*/   margin-left: $_extendPushWidth;}@mixin column($columnIndex,$pushWidth:null){   float:left;/*css*/   border:1px solid;   width:floor(extendWidth($columnIndex)); /*調用 extendWidth 使用者Function Compute寬度，再調用Sass 內建的數學函數 floor 擷取整數*/   @if($pushWidth != null){      @include push($pushWidth); /*調用混合指令(mixin) push 產生 margin-left*/   }}@mixin generateTable{   .my-table{/*css class*/      max-width:400px;      @for $i from 1 through $columnCount{ /*$totalColumns 是上面的全域變數*/          .#{$columnClassName}#{$i}{         background-color:rgba(255,0,0,$i/10);             @include column($i,5);/*調用mixin column 產生 column 樣式*/          }      }   }}.my-form{   width:500px;   @include generateTable();}

注意： mixin 與函數的主要區別：mixin 相當於一段代碼塊，和函數一樣可在其它地方重複調用，它不像函數那樣返回一個值，它是返回一個代碼塊，調用前要加關鍵字 @include；

@for $i from 1 through $columnCount{ } 這是 for 迴圈，把 $i 從 1 開始遞增到 $columnCount；

如果要迴圈一個數組或集合，要用到 @each $var in [array]{}

 

把上面三段代碼 copy 到一個檔案(如 test.scss), 在命令視窗中調用 sass 命令：

sass c:\test.sass c:\test.css

產生的 css ：

@charset "GBK";/*數字*//*樣式*//*字串*//*數組*//*布爾*/.my-form {  width: 500px; }  .my-form .my-table {    /*css class*/    max-width: 400px;    /*$totalColumns 是上面的全域變數*/    /*$totalColumns 是上面的全域變數*/    /*$totalColumns 是上面的全域變數*/    /*$totalColumns 是上面的全域變數*/    /*$totalColumns 是上面的全域變數*/ }    .my-form .my-table .column1 {      background-color: rgba(255, 0, 0, 0.1);      float: left;      /*css*/      border: 1px solid;      width: 50px;      /*調用 extendWidth 使用者Function Compute寬度，再調用Sass 內建的數學函數 floor 擷取整數*/      /*定義內部變數*/      margin-left: 15px;      /*調用混合指令(mixin) push 產生 margin-left*/      /*調用mixin column 產生 column 樣式*/ }    .my-form .my-table .column2 {      background-color: rgba(255, 0, 0, 0.2);      float: left;      /*css*/      border: 1px solid;      width: 100px;      /*調用 extendWidth 使用者Function Compute寬度，再調用Sass 內建的數學函數 floor 擷取整數*/      /*定義內部變數*/      margin-left: 15px;      /*調用混合指令(mixin) push 產生 margin-left*/      /*調用mixin column 產生 column 樣式*/ }    .my-form .my-table .column3 {      background-color: rgba(255, 0, 0, 0.3);      float: left;      /*css*/      border: 1px solid;      width: 150px;      /*調用 extendWidth 使用者Function Compute寬度，再調用Sass 內建的數學函數 floor 擷取整數*/      /*定義內部變數*/      margin-left: 15px;      /*調用混合指令(mixin) push 產生 margin-left*/      /*調用mixin column 產生 column 樣式*/ }    .my-form .my-table .column4 {      background-color: rgba(255, 0, 0, 0.4);      float: left;      /*css*/      border: 1px solid;      width: 200px;      /*調用 extendWidth 使用者Function Compute寬度，再調用Sass 內建的數學函數 floor 擷取整數*/      /*定義內部變數*/      margin-left: 15px;      /*調用混合指令(mixin) push 產生 margin-left*/      /*調用mixin column 產生 column 樣式*/ }    .my-form .my-table .column5 {      background-color: rgba(255, 0, 0, 0.5);      float: left;      /*css*/      border: 1px solid;      width: 250px;      /*調用 extendWidth 使用者Function Compute寬度，再調用Sass 內建的數學函數 floor 擷取整數*/      /*定義內部變數*/      margin-left: 15px;      /*調用混合指令(mixin) push 產生 margin-left*/      /*調用mixin column 產生 column 樣式*/ }

 

效果：

<div class="my-form">    <div class="my-table">        <div class="column1">column1</div>        <div class="column2">column2</div>        <div class="column3">column3</div>    </div>

4.匯入其它sass 檔案：

@import ‘test.scss‘;

 

很明顯用 Sass 來寫 css, 不但代碼量倍數級減少，且優雅簡潔易於維護和擴充；

其實 sass 文法有點像 js ，如果會 js，舉一反三學起來很容易；

 

window 下的編譯環境：

先按裝 Ruby, ：http://rubyinstaller.org/downloads/

再安裝 Sass, 

gem install sass

 

就可以用 sass 命令進行編譯了：

sass input.scss output.css

 

sass 還有一個好牛叉的外掛程式： compass, 先看下官網：http://compass-style.org/， 有時間 再作整理；

 

強悍的 CSS 擴充語言 -- Sass