sass變數詳解——你不知道的sass。

OBKoro1發表於2017-04-22
變數

寫在前面：

現在一直使用sass寫css，當初入門的時候，看的很多教程，當時看的雲裡霧裡的，現在看來還是蠻詳細的，就是一點，不夠小白。本人文章型別一直比較偏小白的，想要更好的為不會用sass提供一點學習的資料，相信本文對想要學習sass的人，還是有極大的參考價值的。裡面有些細節，也許對已經學會使用sass的大手子也有一定的參考價值。

變數是什麼？

w3c關於JavaScript 變數的介紹：

sass變數詳解——你不知道的sass。
可以去搜一下js 變數

上面一大堆巴拉巴拉的東西，可以先這麼理解，把變數看作一個存放東西的盒子，可以將鑰匙、手機、飲料等物品存放在這個盒子中，也可以在需要的時候換成我們想存放的新物品，那裡面的舊的東西就存不了，只能存一個東西。

建議

這裡有個很好的網站，可以線上把sass檔案編譯成css檔案，大家可以跟著栗子，一邊看，一邊動手做做demo，看看最後輸出css是什麼樣子的。

sass變數的格式：

sass變數格式：$var:value; 栗子：$color:red;

1.必須是$開頭

解析：這是sass變數的符號

2.$後面緊跟變數名

解析：變數名首字母必須為字母(a-z A-Z)，下劃線(_)開頭。

3.變數的值

解析：變數值和變數名之間就需要使用冒號(:)分隔開（就像CSS屬性設定一樣）。

sass變數的用法：

$color:red;/*1.這就是宣告變數*/
p{color:$color;}/*P標籤的顏色被改為red————這是變數的使用*/複製程式碼

1.變數使用之前要先宣告變數

解析：宣告在變數這個盒子裡面要放什麼東西，那裡面就有東西了

2.第二步使用變數。

解析：現在變數裡面有東西了，要把裡面的東西拿出來用，就要先找到變數這個盒子，找到盒子才能使用裡面的東西。變數的變數名，就是這個盒子在的地方，把他放在你所要用的地方，就是把盒子裡面的東西取出來用了。

多值變數：

多值變數格式：
$var:value,value,value;

例項：

$back:#fff,green,red;/*1.多個變數一起宣告*/
  p{
    color: nth($back,1);/*2.輸出green*/
  }
  span{
    color: nth($back,3);/*3.輸出red*/複製程式碼

解析：

所謂的多值變數就是字面上的意思，把多個相關的值寫在一個變數裡，然後通過nth($var,index)來獲取第幾個值。通常可以用於在寫頁面的時候宣告多個顏色，然後再樣式裡面直接使用就可以了。

關於變數的作用域：

sass變數詳解——你不知道的sass。
sass裡面的程式碼片段

解析：

以上是我在sass檔案裡面做的一個demo，裡面分成了三個部分，下面分別給大家解析一下。

1.第一部分，變數要提前宣告才能使用。這裡我上面沒有宣告$text1這個變數，直接使用，導致檔案報錯。

sass檔案編譯是從上往下的，所以使用的時候，變數要宣告在上面，當上面沒有宣告的時候，使用這個變數就會報錯，檔案編譯錯誤，導致css檔案無法使用。

2.第二部分，sass的全域性屬性，詳見demo，裡面註釋的很清楚了。

因為sass檔案是從上往下解析的，同一個sass變數在外界宣告的時候，會有一個覆蓋的作用，即上面已經宣告過的變數，會被下面宣告的給覆蓋。

3.第三部分，sass也有區域性變數。區域性被包裹的變數，將不會影響到外界的變數，只在自己的一畝三分田裡面起作用，外界要引用這個變數也是不行的。如果這裡我沒有定義外界的變數，區域性被包裹起來的那部分$text:blue;還是會生效的。

變數的預設值default：

剛才說了，sass檔案是從上往下渲染的，後面宣告的變數會覆蓋前面的變數，default這裡的作用就是使後面的變數變成宣告在第一個的變數（就是開始宣告這個變數的地方，預設是第一個。）

變數格式：

$var:value!default; 栗子：$color:red!default;

程式碼示例。

sass變數詳解——你不知道的sass。
default程式碼示例1

解析：

1.這裡把註釋弄掉之後，sass編譯會出錯，因為上面沒有宣告這個變數，說明加上default之後，剛才關於變數的作用域的介紹也是不變的，下面還有一個區域性作用域的栗子。

2和3.在程式碼註釋裡面，已經很詳細了，不贅述了。

4.說明連續宣告兩個default也是有效的，第一個default會被第二個default覆蓋。第二個default會被沒有宣告default的變數覆蓋，所以最終輸出的是沒有宣告default的變數red。

sass變數詳解——你不知道的sass。
default程式碼示例2

1.這裡不解析了，詳見註釋。

變數用#{}包裹

這是一個格式，用在屬性或者選擇器上面裡。大家看一下栗子就懂了。

$ipt:input;
$btm:bottom;
.#{$ipt}{ /*這裡輸出.input{}*/
    padding-#{$btm}:5rem;/*這裡輸出padding-bottom: 5rem;*/
}複製程式碼

後話：

斷斷續續寫了三天，每天都有在寫，今天算是差不多寫完了。這篇是面向對sass變數概念不太熟悉的朋友，寫的較為詳細，在短短的一篇文章裡面肯定無法保證閱讀本文的人對sass有多熟悉，但我希望通過這篇文章，讓你知道sass變數的一些用法，概念。能夠不再那麼一頭霧水，那麼我這篇文章的目的也就達到了。

最後：因為我經常看不懂別人寫的分享，所以個人寫文比較偏小白，寫的不好之處，歡迎指點。然後就是希望看完的朋友點個喜歡，也可以關注一下我，現在這階段基本上每個月都不會少於十五篇文章（看到乾貨我也會進行分享）。碼字不易，感謝支援！
ps：目前待業，座標北京，求推薦工作。然後希望我寫哪方面的文章可以在底下評論，或者是私信我，雖然寫的不好，但我就當這是記錄自己成長的一種方式咯。（前提是我會了，如果不會我也會記下來，等會了的時候再更出來。）
掘金個人主頁 ，簡書主頁連結，csdn部落格主頁連結 ，github 。

參考文獻：

sass揭祕之變數

以上。2017.4.22

相關文章