Sass 巢狀規則和屬性
Sass 巢狀規則
Sass 允許你以與 HTML 相同的方式巢狀 CSS 選擇器。
看一個網站導航的 Sass 程式碼示例
示例
SCSS Syntax（SCSS 語法）
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
注意，在 Sass 中，ul、li 和 a 選擇器巢狀在 nav 選擇器內部。
而在 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 更簡潔、更容易閱讀。
Sass 巢狀屬性
許多 CSS 屬性有相同的開頭，例如 font-family、font-size 和 font-weight，或者 text-align、text-transform 和 text-overflow。
使用 Sass，你可以將它們寫成巢狀屬性
示例
SCSS Syntax（SCSS 語法）
font: {
family: Helvetica, sans-serif;
size: 18px;
weight: bold;
}
text: {
align: center;
transform: lowercase;
overflow: hidden;
}
Sass 轉譯器會將上面的程式碼轉換為標準的 CSS
CSS Output（CSS 輸出）
font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
text-align: center;
text-transform: lowercase;
text-overflow: hidden;
