一、嵌套
1.选择器嵌套
<header>
<nav>
<a href=“##”>Home</a>
<a href=“##”>About</a>
<a href=“##”>Blog</a>
</nav>
<header>
nav {
a {
color: red;
header & {
color:green;
}
}
}
2.属性嵌套
.box {
border: {
width: 12px;
style: bold;
}
}
等于
.box {
border-width: 12px;
border-style: bold; }
二、混合宏
1.声明混合宏
@mixin border-radius($radius){ //它可以传递多个参数，也可以不传递任何参数
-webkit-border-radius: $radius;
border-radius: $radius;
}
2.调用混合宏
button {
@include border-radius（3px）;
}
三、扩展/继承
.btn {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
}
.btn-primary {
background-color: #f36;
color: #fff;
@extend .btn;
}
.btn-second {
background-color: orange;
color: #fff;
@extend .btn;
}
四、占位符
%pt5{
padding-top: 5px;
}
//这段代码要是没有被 @extend 调用，他并没有产生任何代码块，只是静静的躺在你的某个 SCSS 文件中。只有通过 @extend 调用才会产生代码：
.btn {
@extend %pt5;
}
五：插值
$properties: (margin, padding);
@mixin set-value($side, $value) {
@each $prop in $properties {
#{$prop}-#{$side}: $value;
}
}
.login-box {
@include set-value(top, 14px);
} //结果
.login-box {
margin-top: 14px;
padding-top: 14px;
}
//构建一个选择器
@mixin generate-sizes($class, $small, $medium, $big) {
.#{$class}-small { font-size: $small; }
.#{$class}-medium { font-size: $medium; }
.#{$class}-big { font-size: $big; }
}
@include generate-sizes("header-text", 12px, 20px, 40px); //结果
.header-text-small { font-size: 12px; }
.header-text-medium { font-size: 20px; }
.header-text-big { font-size: 40px; }