1、变量声明
$nav-color: #F90;
nav {
//$width 变量的作用域仅限于{}内
$width: 100px;
width: $width;
color: $nav-color;
} .a {
//报错，$width未定义
width: $width;
}
2、父选择器&
scss代码：
article a {
color: blue;
&:hover { color: red }
}编译后为：
article a {
color: blue;
}
article a:hover {
color: red;
}父选择器的另外一个用途，可以在父选择器之前添加选择器，如处理IE的hack，在html或者body上添加ie class。
示例代码：
#content aside {
color: red;
body.ie & { color: green }
}编译后为：
#content aside {
color: red;
}
body.ie #content aside {
color: green;
}3、群组选择器
.container {
h1, h2, h3 {margin-bottom: .8em}
}编译后：
.container h1,
.container h2,
.container h3 {
margin-bottom: .8em;
}
也可以这样：
nav, aside {
a {color: blue}
}编译后：
nav a,
aside a {
color: blue;
}
4、>、+和~选择器
article {
~ article { border-top: 1px dashed #ccc }
> section { background: #eee }
dl > {
dt { color: #333 }
dd { color: #555 }
}
nav + & { margin-top: 0 }
}编译后为：
article ~ article {
border-top: 1px dashed #ccc;
}
article > section {
background: #eee;
}
article dl > dt {
color: #333;
}
article dl > dd {
color: #555;
}
nav + article {
margin-top:;
}5、SCSS局文件
sass局部文件的文件名以下划线开头。
目的：
sass就不会在编译时单独编译这个文件输出css，而只把这个文件用作导入。
说明：
（1）使用sass的@import规则并不需要指明被导入文件的全名。你可以省略.sass或.scss文件后缀。
（2）当你@import一个局部文件时，还可以不写文件的全名，即省略文件名开头的下划线。
（3）不可以同时存在添加下划线与未添加下划线的同名文件，添加下划线的文件将会被忽略。
6、混合器
混合器定义：
@mixin rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}使用混合器：
notice {
background-color: green;
border: 2px solid #00aa00;
@include rounded-corners;
}编译后为：
notice {
background-color: green;
border: 2px solid #00aa00;
border-radius: 5px;
}2个关键字：@mixin和@include
混合器传参：
@mixin link-colors($normal, $hover, $visited) {
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}使用：
a {
@include link-colors(blue, red, green);
}编译后为：
a {
color: blue;
}
a:hover {
color: red;
}
a:visited {
color: green;
}混合器主要用于展示性样式的重用
7、选择器继承
.error {
border: 1px red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}编译后为：
.error,
.seriousError {
border: 1px red;
background-color: #fdd;
} .seriousError {
border-width: 3px;
}
继承是建立在语义化的关联。
Sass 允许延伸任何定义给单个元素的选择器：
.error {
border: 1px #f00;
background-color: #fdd;
}
.error.intrusion {
background-image: url("/image/hacked.png");
}
.seriousError {
@extend .error;
border-width: 3px;
}编译后为：
.error,
.seriousError {
border: 1px #f00;
background-color: #fdd;
} .error.intrusion,
.intrusion.seriousError {
background-image: url("/image/hacked.png");
} .seriousError {
border-width: 3px;
}
8、@media 媒体查询
.sidebar {
width: 300px;
@media screen and (orientation: landscape) {
width: 500px;
}
}编译后：
.sidebar {
width: 300px;
}
@media screen and (orientation: landscape) {
.sidebar {
width: 500px;
}
}注意：@media 将被编译到文件的最外层。