[Sass]聲明變量

[Sass]聲明變量

定義變量的語法：

在有些編程語言中（如，JavaScript）聲明變量都是使用關鍵詞“var”開頭，但是在 Sass 不使用這個關鍵詞，而是使用大家都喜歡的美元符號“$”開頭。我想用一張圖來解釋，我一直堅信，一圖勝千言萬語：

上圖非常清楚告訴了大家，Sass 的變量包括三個部分：

1. 聲明變量的符號“$”
2. 變量名稱
3. 賦予變量的值

來看一個簡單的示例，假設你的按鈕顏色可以給其聲明幾個變量：

$brand-primary : darken(#428bca, 6.5%) !default; // #337ab7
$btn-primary-color : #fff !default;
$btn-primary-bg : $brand-primary !default;
$btn-primary-border : darken($btn-primary-bg, 5%) !default;

如果值后面加上!default則表示默認值。

注：了解 Bootstrap 的 Sass 版本的同學，就一眼能看出，上面的示例代碼是 Bootstrap 定義 primarybutton 的顏色。

 

[Sass]普通變量與默認變量

普通變量

定義之后可以在全局范圍內使用。

$fontSize: 12px;
body{
    font-size:$fontSize;
}

編譯后的css代碼：

body{
    font-size:12px;
}

默認變量

sass 的默認變量僅需要在值后面加上 !default 即可。

$baseLineHeight:1.5 !default;
body{
    line-height: $baseLineHeight; 
}

 

編譯后的css代碼：

body{
    line-height:1.5;
}

 

sass 的默認變量一般是用來設置默認值，然后根據需求來覆蓋的，覆蓋的方式也很簡單，只需要在默認變量之前重新聲明下變量即可。  

$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
    line-height: $baseLineHeight; 
}

 

編譯后的css代碼：

body{
    line-height:2;
}

 

可以看出現在編譯后的 line-height 為 2，而不是我們默認的 1.5。默認變量的價值在進行組件化開發的時候會非常有用。

轉自：慕課網

（感謝O(∩_∩)O）