av激情亚洲男人的天堂国语,日韩欧美精品一中文字幕,无码av一区二区三区无码,国产又色又爽又刺激的a片,国产又色又爽又刺激的a片

詳解Sass嵌套規(guī)則與屬性

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

Sass 嵌套 CSS 選擇器類(lèi)似于 HTML 的嵌套規(guī)則。

如下我們嵌套一個(gè)導(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;
 }
}

實(shí)例中，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 中，我們可以使用嵌套屬性來(lái)編寫(xiě)它們：

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;

分享標(biāo)題：詳解Sass嵌套規(guī)則與屬性
文章轉(zhuǎn)載：http://uogjgqi.cn/article/codicjc.html
掃二維碼與項(xiàng)目經(jīng)理溝通

我們?cè)谖⑿派?4小時(shí)期待你的聲音

解答本文疑問(wèn)/技術(shù)咨詢/運(yùn)營(yíng)咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流