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

寫在前面：

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

變量是什麼？

w3c關於JavaScript 變量的介紹：

能夠去搜一下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文件裏面作的一個demo，裏面分紅了三個部分，下面分別給你們解析一下。

1.第一部分，變量要提早聲明才能使用。這裏我上面沒有聲明$text1這個變量，直接使用，致使文件報錯。

sass文件編譯是從上往下的，因此使用的時候，變量要聲明在上面，當上面沒有聲明的時候，使用這個變量就會報錯，文件編譯錯誤，致使css文件沒法使用。

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

由於sass文件是從上往下解析的，同一個sass變量在外界聲明的時候，會有一個覆蓋的做用，即上面已經聲明過的變量，會被下面聲明的給覆蓋。

3.第三部分，sass也有局部變量。局部被包裹的變量，將不會影響到外界的變量，只在本身的一畝三分田裏面起做用，外界要引用這個變量也是不行的。若是這裏我沒有定義外界的變量，局部被包裹起來的那部分$text:blue;仍是會生效的。

變量的默認值default：

剛纔說了，sass文件是從上往下渲染的，後面聲明的變量會覆蓋前面的變量，default這裏的做用就是使後面的變量變成聲明在第一個的變量（就是開始聲明這個變量的地方，默認是第一個。）

變量格式：

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

代碼示例。

default代碼示例1

解析：

1.這裏把註釋弄掉以後，sass編譯會出錯，由於上面沒有聲明這個變量，說明加上default以後，剛纔關於變量的做用域的介紹也是不變的，下面還有一個局部做用域的栗子。

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

4.說明連續聲明兩個default也是有效的，第一個default會被第二個default覆蓋。第二個default會被沒有聲明default的變量覆蓋，因此最終輸出的是沒有聲明default的變量red。

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