日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

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

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

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

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

Sass 變量使用 $ 符號：

$variablename: value;

以下實例設置了四個變量：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 變量的作用域只能在當前的層級上有效果，如下所示 h1 的樣式為它內(nèi)部定義的 green，p 標簽則是為 red。

Sass 代碼：

$myColor: red;

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

p {
 color: $myColor;
}

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

Css 代碼：

h1 {
 color: green;
}

p {
 color: red;
}

!global

當然 Sass 中我們可以使用 !global 關鍵詞來設置變量是全局的：

Sass 代碼

$myColor: red;

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

p {
 color: $myColor;
}

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

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

Css 代碼

h1 {
 color: green;
}

p {
 color: green;
}

網(wǎng)頁名稱：詳解Sass變量
標題網(wǎng)址：http://www.dlmjj.cn/article/ccdesoe.html