1.变量声明
ex:
$nav-color:#F90;
$width:100px;
nav{
width:$width;
color:$nav-color;
}
//编译后
nav{
width:100px;
color:#F90;
}
注意:在这段代码中,$nav-color这个变量定义在了规则块外边,所以在这个样式表中都可以像 nav规则块那样引用它。$width这个变量定义在了nav的{ }规则块内,所以它只能在nav规则块 内使用。这意味着是你可以在样式表的其他地方定义和使用$width变量,不会对这里造成影响。
2.变量引用
ex:
$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
border: $highlight-border;
}
//编译后
.selected {
border: 1px solid #F90;
}
3. 嵌套CSS 规则;
#content {
article {
h1 { color: #333 }
p { margin-bottom: 1.4em }
}
aside { background-color: #EEE }
}
/* 编译后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }
4.父选择器的标识符&;
规则一:
ex:
article a {
color: blue;
&:hover { color: red }
}
article a { color: blue }
article a:hover { color: red }
规则二:
#content aside {
color: red;
body.ie & { color: green }
}
/*编译后*/
#content aside {color: red};
body.ie #content aside { color: green }
5. 群组选择器的嵌套;
.container h1, .container h2, .container h3 { margin-bottom: .8em }
.container {
h1, h2, h3 {margin-bottom: .8em}
}
6. 嵌套导入
一个名为_blue-theme.scss的局部文件,内容如下:
aside {
background: blue;
color: white;
}
然后把它导入到一个CSS规则内,如下所示:
.blue-theme {@import "blue-theme"}
//生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。
.blue-theme {
aside {
background: blue;
color: #fff;
}
}