Sass 嵌套规则与属性

Sass 嵌套规则

Sass 让您可以与 HTML 相同的方式嵌套 CSS 选择器。

先看一个站点导航的 Sass 代码示例:

实例

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 语法:

font: {
 family: Helvetica, sans-serif;
 size: 18px;
 weight: bold;
}
text: {
 align: center;
 transform: lowercase;
 overflow: hidden;
}

Sass transpiler 将转换成为如下 CSS 代码:

CSS 输出:

font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
text-align: center;
text-transform: lowercase;
text-overflow:  hidden;