強悍的 CSS 擴展語言 -- Sass

時間 2019-11-12

標籤強悍 css 擴展語言 sass 欄目 CSS 简体版

原文原文鏈接

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

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

若是手寫純 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;
      }
   }
}

代碼可嵌套了；sass

CSS 是層疊樣式表，不是語言，缺少編程語言中強大的特性：變量、函數、運算、循環、判斷、繼承等；ruby

而它的擴展語言 Sass 就支持這些特性，Sass 讓咱們用編程方式來寫 CSS 代碼從而提升效率節約程序員的時間；dom

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

下面就最近本身經常使用的 Sass 知識點作下簡要的記錄，方便之後複習；函數

1.變量spa

定義變量 "$[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 用戶函數計算寬度，再調用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 用戶函數計算寬度，再調用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 用戶函數計算寬度，再調用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 用戶函數計算寬度，再調用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 用戶函數計算寬度，再調用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 用戶函數計算寬度，再調用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>