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、マクロを混和し、パラメータを伝達しない、1つのパラメータを伝達する、複数のパラメータを伝達する
@mixinでミックスマクロを宣言し、@includeで宣言したミックスマクロを呼び出します.

@mixin center{//    
  text-align: center;
} 
.sa{
  @include center
}
@mixin center($center){//     
  text-align: $center;
} 
.sa{
  @include center(center)
}

コンパイル後はすべて

.sa {
  text-align: center;
}

複数のパラメータを渡すには2つのケースがあり、指定された個数のパラメータと「...」を直接伝えることができます.(パラメータを省略するように言います).

@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;
}