SASS組件開發

SASS組件開發

SASS預處理器，增加了css所沒有的編程能力，帶來了前端開發的效率提高，以及擴展了css的編寫技巧。

組件開發

設計一個表單提示層（包括成功success，警告warning，錯誤等狀態error）組件，css需要定義基本樣式字體（font-）、外內邊距（padding，margin）、顯示方式（display）、邊框（border）以及其他相關的內容，再為單獨的狀態定義需要的樣式。

css組件開發

先定義基本樣式，再對每一個狀態定義一套樣式

.tips { /* 基本顏色設置 */
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 4px;
}
 
//成功狀態
.tips-success{
    background-color: #47a447;
    color: #fff;
}
 
//警告狀態
.tips-warning{
    background-color: #ed9c28;
    color: #fff;
}
 
//錯誤狀態
.tips-error{
    background-color: #ed9c28;
    color: #fff;
}
 

每一種狀態文字和邊框顏色需要單獨設置，稍顯繁瑣。后期擴展其它狀態，如信息info、危險dange等，就是工作成本的提高。幸好SASS提供了編程能力，為我們解決這種擔憂，提高了工作效率。

sass組件開發

組件是對數據和方法的簡單封裝。

變量默認值!default

先來看一段js的變量聲明代碼

var a = 1;
console.log(a);//1
 

再看一段sass代碼，是不是很簡單。

$color:blue;
$color:red; !default;//變量申明帶有!default，表示當前值為缺省值
p{
    color:$color;//輸出blue
}
 

聲明 !default ，在這里輸出blue，很有趣吧。簡單說下它的作用：假設變量申明帶有!default，表示此變量為默認值，可被全局的普通聲明覆蓋。這點還不能體現它的偉大作用。

<p>@mixin應用</p>

• 先聲明@mixin
• 在需要的地方使用@include來聲明調用mixins。

  /* mixin */
  @mixintips($background,$text-color,$tipsStylePadding) {
      background-color: $background;
      color: $text-color;
      padding: $tipsStylePadding;
      margin-bottom: 20px;
      border-radius: 4px;
  }
   
  

調用功能模塊，當前的組件可擴展出多個組件樣式。

//成功狀態
.tips-success { 
  @includetips($background,$text-color,$tipsStylePadding);
}
 
//警告狀態
.tips-warning {
  @includetips($background,$text-color,$tipsStylePadding);
}
 
//錯誤狀態
.tips-error {
  @includetips($background,$text-color,$tipsStylePadding);
}
 
//信息狀態（再擴展一個）
.tips-info {
  @includetips($background,$text-color);,$tipsStylePadding
}
 

<p>@include在需要的地方隨意調用，不夠規范，后期難以維護。</p>

組件實例

• 現在我們新建個scss文件，這里暫且叫做_tips.scss。

  /* 變量
  ---------------------------------*/
  $background:        #47a447 !default;
  $text-color:        #fff !default;
  $tipsStylePadding:  15px !default;
  /* mixin
  ---------------------------------*/
  @mixintips($background,$text-color,$tipsStylePadding) {
      background-color: $background;
      color: $text-color;
      padding: $tipsStylePadding;
      margin-bottom: 20px;
      border-radius: 4px;
  }
  /*樣式
  ---------------------------------*/
  //成功狀態
  .tips-success { 
    @includetips($background,$text-color,$tipsStylePadding);
  }
   
  //警告狀態
  .tips-warning {
    @includetips($background,$text-color,$tipsStylePadding);
  }
   
  //錯誤狀態
  .tips-error {
    @includetips($background,$text-color,$tipsStylePadding);
  }
   
  //信息狀態（再擴展一個）
  .tips-info {
    @includetips($background,$text-color,$tipsStylePadding);
  }
   
  

接下來我們要在所需要的文件，調用這個文件，這個組件就開發完了

//導入_tpis.scss
@import '_tips';    
 

問題？

• 組件是重復可調用的，也是對數據和方法的簡單封裝
• 如果我們對默認的padding為15px不滿意，要改為5px，怎么弄

重新覆寫

重新覆寫，會產生相同的代碼，這不是我們想要的組件

//導入_tips.scss
@import '_tips';
.tips-success{
    padding:5px;
}
/*編譯后樣式
---------------------------------*/
.tips-success{ 
    background-color: #47a447;
    color: #fff;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
}
.tips-success{
    padding: 5px;
}
 

修改參數

改變@include的參數，同樣會產生相同的代碼，也不是我們想要的組件

//導入_tips.scss
@import '_tips';
.tips-success{
  @includetips($tipsStyleBorder,5px);
}
/*編譯后樣式
---------------------------------*/
.tips-success{ 
    background-color: #47a447;
    color: #fff;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
}
.tips-success{
    background-color: #47a447;
    color: #fff;
    padding: 5px;
    margin-bottom: 20px;
    border-radius: 4px;
}
 

正確解決方法

這里就需要使用 !default;特性

//申明$tpisStylePadding為5px
$tpisStylePadding:  5px;
 
//導入_tips.scss
@import '_tips';
 
/*編譯后樣式
---------------------------------*/
.tips-success {
    background-color: #47a447;
    color: #fff;
    padding: 5px;
    margin-bottom: 20px;
    border-radius: 4px;
}
 

變量設計原則

• 所有變量為默認值，后面加有!default，以方便覆蓋；
• 有些變量為開關變量，值只能是true或false，可以用來表示是否輸出樣式，應用于兼容及控制代碼；
• 有些變量為復合變量，一個變量會有幾個值，以減少變量個數。

參考文檔

• sassCore http://www.w3cplus.com/sasscore/index.html
• sass揭秘之變量 http://www.w3cplus.com/preprocessor/sass-basic-variable.html

 

來自：http://web.jobbole.com/89742/