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;
