SASS元件開發
SASS前處理器，增加了css所沒有的程式設計能力，帶來了前端開發的效率提高，以及擴充套件了css的編寫技巧。
元件開發
設計一個表單提示層（包括成功success，警告warning，錯誤等狀態error）元件，css需要定義基本樣式字型（font-）、外內邊距（padding，margin）、顯示方式（display）、邊框（border）以及其他相關的內容，再為單獨的狀態定義需要的樣式。
css元件開發
先定義基本樣式，再對每一個狀態定義一套樣式
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.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的變數宣告程式碼
|
1 2 3 |
var a = 1; console.log(a);//1 |
再看一段sass程式碼，是不是很簡單。
|
1 2 3 4 5 6 |
$color:blue; $color:red; !default;//變數申明帶有!default，表示當前值為預設值 p{ color:$color;//輸出blue } |
宣告!default，在這裡輸出blue，很有趣吧。簡單說下它的作用：假設變數申明帶有!default，表示此變數為預設值，可被全域性的普通宣告覆蓋。這點還不能體現它的偉大作用。
@mixin應用
- 先宣告@mixin
- 在需要的地方使用@include來宣告呼叫mixins。
123456789/* mixin */@mixin tips($background,$text-color,$tipsStylePadding) {background-color: $background;color: $text-color;padding: $tipsStylePadding;margin-bottom: 20px;border-radius: 4px;}
呼叫功能模組，當前的元件可擴充套件出多個元件樣式。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
//成功狀態 .tips-success { @include tips($background,$text-color,$tipsStylePadding); } //警告狀態 .tips-warning { @include tips($background,$text-color,$tipsStylePadding); } //錯誤狀態 .tips-error { @include tips($background,$text-color,$tipsStylePadding); } //資訊狀態（再擴充套件一個） .tips-info { @include tips($background,$text-color);,$tipsStylePadding } |
@include在需要的地方隨意呼叫，不夠規範，後期難以維護。
元件例項
- 現在我們新建個scss檔案，這裡暫且叫做_tips.scss。
123456789101112131415161718192021222324252627282930313233343536/* 變數---------------------------------*/$background: #47a447 !default;$text-color: #fff !default;$tipsStylePadding: 15px !default;/* mixin---------------------------------*/@mixin tips($background,$text-color,$tipsStylePadding) {background-color: $background;color: $text-color;padding: $tipsStylePadding;margin-bottom: 20px;border-radius: 4px;}/*樣式---------------------------------*///成功狀態.tips-success {@include tips($background,$text-color,$tipsStylePadding);}//警告狀態.tips-warning {@include tips($background,$text-color,$tipsStylePadding);}//錯誤狀態.tips-error {@include tips($background,$text-color,$tipsStylePadding);}//資訊狀態（再擴充套件一個）.tips-info {@include tips($background,$text-color,$tipsStylePadding);}
接下來我們要在所需要的檔案，呼叫這個檔案，這個元件就開發完了
|
1 2 3 |
//匯入_tpis.scss @import '_tips'; |
問題？
- 元件是重複可呼叫的，也是對資料和方法的簡單封裝
- 如果我們對預設的padding為15px不滿意，要改為5px，怎麼弄
重新覆寫
重新覆寫，會產生相同的程式碼，這不是我們想要的元件
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
//匯入_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的引數，同樣會產生相同的程式碼，也不是我們想要的元件
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
//匯入_tips.scss @import '_tips'; .tips-success{ @include tips($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;特性
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//申明$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