Sass嵌套属性

嵌套(Nesting)：Sass的嵌套有两种：一种是选择器的嵌套；另一种是属性的嵌套。

1、选择器嵌套：所谓选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而增强了sass文件的结构性和可读性。

在选择器嵌套中，可以使用 & 表示父元素选择器

scss编译

$linkColor:#08c #333 !default;//第一个值为默认值，第二个鼠标滑过值a{  color:nth($linkColor,1);  &:hover{    color:nth($linkColor,2);  }}

css输出

a {  color: #08c;}a:hover {  color: #333;}

2、所谓属性嵌套指的是有些属性拥有同一个开始单词，如border-width，border-color都是以border开头。

scss编译

.longzhoufeng {    border: {        style: solid;        left: {            width: 4px;            color: #888;        }        right: {            width: 2px;            color: #ccc;        }    }}

css输出

.longzhoufeng {  border-style: solid;  border-left-width: 4px;  border-left-color: #888;  border-right-width: 2px;  border-right-color: #ccc;}

或者，如图所示