Sass变量、嵌套、混和宏、继承、占位符

初次学习Sass，做下简单的总结。
1、全局变量和局部变量

$color : green;
span{
color: $color;//调用全局变量
}
div{
$color: red;
p{//选择器嵌套
color: $color;//调用局部变量
}
}
i{
color: $color;//调用全局变量

}

编译后
span {
color: green;
}

div p {
color: red;
}

i {
color: green;
}
2、嵌套（选择器嵌套、属性嵌套、伪类嵌套）
.box{
margin:{//属性嵌套（属性后加冒号，在大括号里写样式）
top: 5px;
bottom: 3px;
}
}
.wrap{
&:after{//伪类嵌套（用&符号进行连接 ）
content: "";
display: block;
}
}编译后
.box {
margin-top: 5px;
margin-bottom: 3px;
}
.wrap:after {
content: "";
display: block;
}
3、混和宏，分为不传参数、传一个参数、传多个参数

用@mixin声明混和宏，用@include调用声明好的混和宏
@mixin center{//不传参数
text-align: center;
}
.sa{
@include center
}
@mixin center($center){//传一个参数
text-align: $center;
}
.sa{
@include center(center)
}编译后都是
.sa {
text-align: center;
}传多个参数可分两种情况，直接传指定个数的参数和“...”（我叫它省略参数）。
@mixin center($width,$height){//指定个数的参数
width: $width;
height: $height;
}
.sa{
@include center(500px,300px)
}编译后
.sa {
width: 500px;
height: 300px;
}省略参数
@mixin center($padding...){//特殊参数 ...
@if length($padding) >= 1{
padding: $padding;
}@else{
padding: 10px 5px;
}
}
.sa{
@include center(2px,3px)//满足else
}
.sub{
@include center //满足参数长度不大于等于1
}编译后
.sa {
padding: 2px, 3px;
}
.sub {
padding: 10px 5px;
}
4、继承

.btn{
border-radius: 5px;
}
#fl{
float: left;
}
.sa{
@extend .btn;
@extend #fl;
}

编译后
.btn, .sa {
border-radius: 5px;
}

#fl, .sa {
float: left;
}5、占位符，缺点很明显，不能合并
%fr{
float: right;
}
%block{
display: block;
}
.sa{
@extend %fr;
@extend %block;
}编译后
.sa {
float: right;
}

.sa {
display: block;
}

使用&符号，可合并具有相同属性的调用者
%fr{
float: right;
}
%block{
display: block;
}
.sub{
@extend %block;
&, span{
@extend %fr;
}
}

编译后
.sub, .sub span {
float: right;
}

.sub {
display: block;
}