Sass(Syntactically Awesome StyleSheets)是css的一個擴(kuò)展開發(fā)工具，它允許你使用變量、條件語句等，使開發(fā)更簡單可維護(hù)。

變量用于存儲一些信息，它可以重復(fù)使用。

Sass 變量可以存儲以下信息：

1. 字符串
   
2. 數(shù)字
   
3. 顏色值
   
4. 布爾值
   
5. 列表
   
6. null 值
   

Sass 變量使用 $ 符號：

$variablename: value;

以下實(shí)例設(shè)置了四個變量：myFont, myColor, myFontSize, 和 myWidth。

變量聲明后我們就可以在代碼中使用它：

Sass 代碼：

$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;

body {
 font-family: $myFont;
 font-size: $myFontSize;
 color: $myColor;
}

#container {
 width: $myWidth;
}

將以上代碼轉(zhuǎn)換為 CSS 代碼，如下所示：

Css 代碼：

body {
 font-family: Helvetica, sans-serif;
 font-size: 18px;
 color: red;
}

#container {
 width: 680px;
}

Sass 作用域

Sass 變量的作用域只能在當(dāng)前的層級上有效果，如下所示 h1 的樣式為它內(nèi)部定義的 green，p 標(biāo)簽則是為 red。

Sass 代碼：

$myColor: red;

h1 {
 $myColor: green;   // 只在 h1 里頭有用，局部作用域
 color: $myColor;
}

p {
 color: $myColor;
}

將以上代碼轉(zhuǎn)換為 CSS 代碼，如下所示：

Css 代碼：

h1 {
 color: green;
}

p {
 color: red;
}

!global

當(dāng)然 Sass 中我們可以使用 !global 關(guān)鍵詞來設(shè)置變量是全局的：

Sass 代碼

$myColor: red;

h1 {
 $myColor: green !global;  // 全局作用域
 color: $myColor;
}

p {
 color: $myColor;
}

現(xiàn)在 p 標(biāo)簽的樣式就會變成 green。

將以上代碼轉(zhuǎn)換為 CSS 代碼，如下所示：

Css 代碼

h1 {
 color: green;
}

p {
 color: green;
}

網(wǎng)頁標(biāo)題：詳解Sass變量
分享鏈接：http://uogjgqi.cn/article/ccdesoe.html