SCSS @content

關於@mixin混合器的用法可以參閱scss @mixin一章節。

通過此命令可以將指定的樣式程式碼，在使用@include引用混合器的時候傳遞給混合器。

看如下程式碼例項:

[Scss] 純文字檢視 複製程式碼
@mixin antzone {
  #head {
    @content;
  }
}
@include antzone {
  #logo {
    width:180px;
    height:50px;
  }
}

編譯後生成的css程式碼如下:

[CSS] 純文字檢視 複製程式碼
#head #logo {
  width: 180px;
  height: 50px; 
}

下面就對程式碼做一下簡單分析:

（1）.@content可以理解為樣式程式碼的佔位符。

（2）.當使用@include引用混合器的時候，裡面所定義的css程式碼就會插入到@content所在的位置。

特別說明:與變數的作用域類似，被傳遞的樣式程式碼的作用域也是在定義的時候確定，也就是說，此樣式程式碼的作用域就是它被定義時所在的塊，而不是在混合器中，程式碼例項如下:

[Scss] 純文字檢視 複製程式碼
$color: white;
@mixin colors($color: blue) {
  background-color: $color;
  @content;
  border-color: $color;
}
.colors {
  @include colors { 
    color: $color; 
  }
}

所以color的屬性值是white，而不是blue。

@content比較常見使用在媒體查詢中，看如下程式碼例項:

[Scss] 純文字檢視 複製程式碼
$width-small:  400px;
$width-medium: 760px;
$width-large:  1200px;
@mixin responsive($width) {
  @if $width == wide-screens {
    @media only screen and (max-width: $width-large) { @content; }
  }
  @else if $width == medium-screens {
    @media only screen and (max-width: $width-medium) { @content; }
  }
  @else if $width == small-screens {
    @media only screen and (max-width: $width-small) { @content; }
  }
}
 
#content {
  float: left;
  width: 70%;
  @include responsive(wide-screens) {
    width: 80%;
  }
  @include responsive(medium-screens) {
    width: 50%;
    font-size: 14px;
  }
  @include responsive(small-screens) {
    float: none;
    width: 100%;
    font-size: 12px;
  }
}

可以看到使用@content非常的方便，可以根據不同的條件，引入不同的css程式碼，非常的靈活。