使用scss不但可以实现选择器的嵌套,属性也可以进行嵌套。
首先看一段代码实例:
nav { border-style: solid; border-width: 1px; border-color: #ccc; }
在scss看来,上面的代码也是可以进行简化的,代码如下:
nav { border: { style: solid; width: 1px; color: #ccc; } }
规则如下:
(1)把属性名从中划线-的地方断开。
(2)在根属性后边添加一个冒号:紧跟一个块,把子属性部分写在这个{ }块中。
再来看一段代码实例:
nav { border: 1px solid #ccc; border-left: 0px; border-right: 0px; }
上面的css代码可以使用scss改造如下:
nav { border: 1px solid #ccc { left: 0px; right: 0px; } }