SCSS @include、@mixin 與 @content

@include 與 @extend 有點類似，但與 @extend 不同的是，@include 方法可以接受變數。
我們需要先定義 @mixin，並且在使用的時候用 @include 去呼叫，請見以下：

 @mixin border-radius($int: 4px) { //使用 @mixin 定義一個 border-radius 方法，變數預設值是 4px
  border-radius: $int;
  display: block; 
 }

 .a {
  @include border-radius(10px); //使用 @include 呼叫 border-radius 方法，變數是 10px
  display: block; 
 }

 .b {
  @include border-radius(); //個例子沒有置入變數，因此會使用預設值
  display: block; 
 }

  會匯出以下結果：
 

 
 .a {
  border-radius: 10px;
  display: block; 
 } 
  
 .b {
  border-radius: 4px;
  display: block; 
 }

因為肩負傳送變數的任務，因此 @include 並不像 @extend 一樣能整合選擇器，就算是一樣的結果，@extend 還是會分別各自匯出。
除了傳送變數之外，@include 還能使用一個特殊的關鍵字 @content 來傳送樣式至其他選擇器結果，舉例來說：
 

 @mixin status($str) {

  &#{$str} {
   @content;
  }
 }

 .btn {
  display: inline-block;
  background-color: gray;

  @include status('.success') {
   background-color: green;
  }
 }

我們在 @include 方法後面接了一個大括弧，括弧內的樣式會被送至 @content 中，以上的例子有點類似以下：
 

 .btn {
  display: inline-block;
  background-color: gray;

  &.success {
   background-color: green;
  }
 }

我們傳進去的參數會變成選擇器，最後會匯出下面這樣的 CSS：

 .btn {
  display: inline-block;
  background-color: gray;
 }

 .btn.success {
  background-color: green;
 }

相信不少人已經想到，我們完全可以用 @mixin 與 @content 去規劃 media query 的取用方式：

 @mixin print() {

  @media print {
   @content;
  }
 }

 @mixin rwd($max, $min) {

  @media (max-width: #{$max}) and (min-width: #{$min}) {
   @content;
  }
 }

 .btn {
  display: inline-block;
  background-color: gray;

  @include rwd(768px, 320px) {
   background-color: green;
  }

  @include print() {
   display: none;
  }
 }

以上會匯出下面這樣的 CSS：
 

 .btn {
  display: inline-block;
  background-color: gray;
 }

 @media (max-width: 768px) and (min-width: 320px) {
  .btn {
   background-color: green;
  }
 }

 @media print {
  .btn {
   display: none;
  }
 }