建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
詳解Sass嵌套規(guī)則與屬性
Sass(Syntactically Awesome StyleSheets)是css的一個擴展開發(fā)工具，它允許你使用變量、條件語句等，使開發(fā)更簡單可維護。
Sass 嵌套 CSS 選擇器類似于 HTML 的嵌套規(guī)則。
如下我們嵌套一個導(dǎo)航欄的樣式：
Sass 代碼：
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
實例中，ul, li, 和 a 選擇器都嵌套在 nav 選擇器中
將以上代碼轉(zhuǎn)換為 CSS 代碼，如下所示：
Css 代碼：
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
Sass 嵌套屬性
很多 CSS 屬性都有同樣的前綴，例如：font-family, font-size 和 font-weight ， text-align, text-transform 和 text-overflow。
在 Sass 中，我們可以使用嵌套屬性來編寫它們：
Sass 代碼：
font: {
family: Helvetica, sans-serif;
size: 18px;
weight: bold;
}
text: {
align: center;
transform: lowercase;
overflow: hidden;
}
將以上代碼轉(zhuǎn)換為 CSS 代碼，如下所示：
Css 代碼：
font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
text-align: center;
text-transform: lowercase;
text-overflow: hidden;
網(wǎng)頁題目：詳解Sass嵌套規(guī)則與屬性
網(wǎng)頁路徑：http://m.5511xx.com/article/codicjc.html
