1. 嵌套选择器

#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 }

2. 变量声明和使用

$width: 100px;
$height: 100px;
$bg-red: #ff4040;
.box{width: $width;height: $height;background: $bg-red;
}

编译后

.box{width: 100px;height: 100px;background: #ff4040;
}

3. 父选择器标识符&

article a {color: blue;&:hover { color: red }
}

编译后

article a { color: blue }
article a:hover { color: red }

4. 嵌套属性

nav {border: {style: solid;width: 1px;color: #000;}
}

编译后

nav {border-style: solid;border-width: 1px;border-color: #ccc;
}

5. 混合器（整合重复代码）

• @mixin 定义混合器
• @include 使用混合器

1. 定义混合器

@mixin box-style {width: 100px;height: 100px;
}

2. 使用混合器

.box1{background: cyan;@include box-style;
}
.box2{background: #ff4040;@include box-style;
}

编译后

.box1{background: cyan;width: 100px;height: 100px;
}
.box2{background: #ff4040;width: 100px;height: 100px;
}

6. 给混合器传参

• @mixin接收参数使用 @include传参，这种方式跟JavaScript的function很像

1. 定义混合器

@mixin link-colors($normal, $hover, $visited) {color: $normal;&:hover { color: $hover; }&:visited { color: $visited; }
}

2. 使用混合器并传参进去

a {@include link-colors(blue, red, green);
}

编译后

a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

7. @for

用法1：through

条件范围包含 start 与 end 的值 @for $var from <start> through <end>

@for $i from 1 through 3 {.w-#{$i * 100} { width: 100px * $i; }
}

编译后

.w-100 {width: 100px;}
.w-200 {width: 200px;}
.w-300 {width: 300px;}

用法2：to

条件范围只包含 start 的值不包含 end 的值 @for $var from <start> to <end>

@for $i from 1 to 3 {.w-#{$i * 100} { width: 100px * $i; }
}

编译后

.w-100 {width: 100px;}
.w-200 {width: 200px;}