建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
詳解Sass變量
Sass(Syntactically Awesome StyleSheets)是css的一個擴(kuò)展開發(fā)工具，它允許你使用變量、條件語句等，使開發(fā)更簡單可維護(hù)。
變量用于存儲一些信息，它可以重復(fù)使用。
Sass 變量可以存儲以下信息：
-
字符串
-
數(shù)字
-
顏色值
-
布爾值
-
列表
-
null 值
Sass 變量使用 $ 符號：
$variablename: value;
以下實例設(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;
}
當(dāng)前名稱：詳解Sass變量
URL網(wǎng)址：http://www.fisionsoft.com.cn/article/ccdesoe.html
