SCSS 嵌套语法

嵌套 CSS 规则

css 中重复写选择器是麻烦的。如果要写一大串指向页面中同一块的样式时，往往需要 一遍又一遍地写同一个 ID :

#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

像这种情况，sass可以让你只写一遍，且使样式可读性更高。

在Sass中，你可以像俄罗斯套娃那样在规则块中嵌套规则块。sass在输出css时会帮你把这些嵌套规则处理好，避免你的重复书写。

示例 :

/* 定义变量与值 */
$bg-color: #FF0000;

/* 使用变量 */
.test-box {
  background-color : $bg-color;
  span{color:#FFFFFF;}
  a{color:#3688FF;}
}

编译后

@charset "UTF-8";
/* 定义变量与值 */
/* 使用变量 */
.test-box {
  background-color: #FF0000;
}
.test-box span {
  color: #FFFFFF;
}
.test-box a {
  color: #3688FF;
}

/*# sourceMappingURL=test.css.map */