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則表示默認值。

普通變量

定義以後能夠在全局範圍內使用。

$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。默認變量的價值在進行組件化開發的時候會很是有用。

變量的調用

在 Sass 中聲明瞭變量以後，就能夠在須要的地方調用變量。調用變量的方法也很是的簡單。

好比在定義了變量

$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;

在按鈕 button 中調用，能夠按下面的方式調用

.btn-primary { background-color: $btn-primary-bg; color: $btn-primary-color; border: 1px solid $btn-primary-border; }

編譯出來的CSS:

.btn-primary { background-color: #337ab7; color: #fff; border: 1px solid #2e6da4; }

[Sass]局部變量和全局變量

Sass 中變量的做用域在過去幾年已經發生了一些改變。直到最近，規則集和其餘範圍內聲明變量的做用域才默認爲本地。若是已經存在同名的全局變量，從 3.4 版本開始，Sass 已經能夠正確處理做用域的概念，並經過建立一個新的局部變量來代替。

全局變量與局部變量

先來看一下代碼例子：

//SCSS$color: orange !default;//定義全局變量(在選擇器、函數、混合宏...的外面定義的變量爲全局變量) .block { color: $color;//調用全局變量 } em { $color: red;//定義局部變量 a { color: $color;//調用局部變量 } } span { color: $color;//調用全局變量 }

css 的結果：

//CSS .block { color: orange; } em a { color: red; } span { color: orange; }

上面的示例演示能夠得知，在元素內部定義的變量不會影響其餘元素。如此能夠簡單的理解成，全局變量就是定義在元素外面的變量，以下代碼：

$color:orange !default;

$color 就是一個全局變量，而定義在元素內部的變量，好比 $color:red; 是一個局部變量。

除此以外，Sass 如今還提供一個 !global 參數。!global 和 !default 對於定義變量都是頗有幫助的。咱們以後將會詳細介紹這兩個參數的使用以及其功能。

全局變量的影子

當在局部範圍（選擇器內、函數內、混合宏內...）聲明一個已經存在於全局範圍內的變量時，局部變量就成爲了全局變量的影子。基本上，局部變量只會在局部範圍內覆蓋全局變量。

上面例子中的 em 選擇器內的變量 $color 就是一個全局變量的影子。

//SCSS$color: orange !default;//定義全局變量 .block { color: $color;//調用全局變量 } em { $color: red;//定義局部變量（全局變量 $color 的影子） a { color: $color;//調用局部變量 } }

多值變量

List形式

$colors: red blue green;

color: nth($colors, 1);

map形式

$map: (key1:value1, key2:value2);

map-get(key1);

何時聲明變量？

個人建議，建立變量只適用於感受確有必要的狀況下.

1.該值至少重複出現了兩次；

2.該值至少可能會被更新一次；

3.該值全部的表現都與變量有關（非巧合）。

基本上，沒有理由聲明一個永遠不須要更新或者只在單一地方使用變量。

若是有任何技術問題諮詢交流歡迎加羣523916260，有大牛坐鎮。

樣式導入

局部文件

專門爲導入而編寫的 sass文件，並不須要生成對應的獨立文件，這個時候，sass如何判別呢？

依靠約定，sass局部文件的文件名如下劃線開頭，局部文件能夠被多個不一樣的文件引用。當一些樣式須要在多個頁面甚至多個項目中使用時，這很是有用。在這種狀況下，有時須要在你的樣式表中對導入的樣式稍做修改，sass有一個功能恰好能夠解決這個問題，即默認變量值。

導入局部文件

@import（文件名）

語法和css中導入文件的語法是一致的，那麼就存在導入的文件能夠是scss文件也能夠是css原生文件的問題。

只要符合下面的條件，scss會自動識別導入的原生css文件:

一、被導入文件的名字以.css結尾；

二、被導入文件的名字是一個URL地址（好比http://xxx/css.css）

三、被導入文件的名字是CSS的(url)值。