Sass 嵌套规则与属性
Sass 嵌套规则与属性
sass的嵌套编写方式如下
nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } }
监听转换的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 中,我们可以使用嵌套属性来编写它们:+
font: { family: Helvetica, sans-serif; size: 18px; weight: bold; } text: { align: center; transform: lowercase; overflow: hidden; }
转换为
font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
text-align: center;
text-transform: lowercase;
text-overflow: hidden;
滴水穿石,非一日之功