目錄

1. Sass 允許將一套 CSS 樣式嵌套進另一套樣式中，內層的樣式將它外層的選擇器作為父選擇器

2.??父選擇器?&

3. 屬性嵌套

---

1. Sass 允許將一套 CSS 樣式嵌套進另一套樣式中，內層的樣式將它外層的選擇器作為父選擇器

#app { h1 {text-align: center;} }

編譯結果

#app h1 { text-align: center; }

避免了重復輸入父選擇器，而且令復雜的 CSS 結構更易于管理

2.??父選擇器?&

在上一個例子中如果父子嵌套，但是我想操作 #app 的:hover? 此時可以用?&?代表嵌套規則外層的父選擇器。

a {font-weight: bold;text-decoration: none;&:hover { text-decoration: underline; }body.firefox & { font-weight: normal; } }

編譯為

a {font-weight: bold;text-decoration: none; } a:hover {text-decoration: underline; } body.firefox a {font-weight: normal; }

?編譯后的 CSS 文件中?&?將被替換成嵌套外層的父選擇器，如果含有多層嵌套，最外層的父選擇器會一層一層向下傳遞

&所在的位置只代表了他的父親，也就是說在每一層，指向是都是他所在的父元素。

#main {color: black;a {font-weight: bold;&:hover { color: red; }} }

編譯為

#main {color: black; } #main a {font-weight: bold; } #main a:hover {color: red; }

3. 屬性嵌套

有些 CSS 屬性遵循相同的命名空間 (namespace)，比如?font-family, font-size, font-weight?都以?font?作為屬性的命名空間。為了便于管理這樣的屬性，同時也為了避免了重復輸入，Sass 允許將屬性嵌套在命名空間中，例如：

.funky {font: {family: fantasy;size: 30em;weight: bold;} }

編譯為

.funky {font-family: fantasy;font-size: 30em;font-weight: bold; }

命名空間也可以包含自己的屬性值，例如：

.funky {font: 20px/24px {family: fantasy;weight: bold;} }

編譯為

.funky {font: 20px/24px;font-family: fantasy;font-weight: bold; }

?

?

總結

以上是生活随笔為你收集整理的Scss中的嵌套规则的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。