Sass @mixin 和 @include
Sass Mixins
The @mixin directive lets you create CSS code that is to be reused throughout the website.（`@mixin` 指令允許你建立可在整個網站中重用的 CSS 程式碼。）
The @include directive is created to let you use (include) the mixin.（`@include` 指令用於使用（包含）mixin。）
Defining a Mixin（定義 Mixin）
A mixin is defined with the @mixin directive.（Mixin 使用 `@mixin` 指令定義。）
Sass @mixin Syntax（Sass @mixin 語法）
@mixin name {
property: value;
property: value;
...
}
The following example creates a mixin named "important-text"（下面的示例建立一個名為“important-text”的 mixin）
SCSS Syntax（SCSS 語法）
@mixin important-text {
color: red;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
}
Tip: A tip on hyphens and underscore in Sass: Hyphens and underscores are considered to be the same. This means that @mixin important-text { } and @mixin important_text { } are considered as the same mixin!（**提示：** 關於 Sass 中連字元和下劃線的說明：連字元和下劃線被視為相同。這意味著 @mixin important-text { } 和 @mixin important_text { } 被視為同一個 mixin！）
Using a Mixin（使用 Mixin）
The @include directive is used to include a mixin.（`@include` 指令用於包含 mixin。）
Sass @include mixin Syntax（Sass @include mixin 語法）
selector{
@include mixin-name;
}
So, to include the important-text mixin created above（所以，要包含上面建立的 important-text mixin）
SCSS Syntax（SCSS 語法）
.danger {
@include important-text;
background-color: green;
}
The Sass transpiler will convert the above to normal CSS（Sass 編譯器會將上面的程式碼轉換為常規 CSS）
CSS output（CSS 輸出）
.danger {
color: red;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
background-color: green;
}
A mixin can also include other mixins（Mixin 也可以包含其他 mixin）
SCSS Syntax（SCSS 語法）
@mixin special-text {
@include important-text;
@include link;
@include special-border;
}
Passing Variables to a Mixin（將變數傳遞給 Mixin）
Mixins accept arguments. This way you can pass variables to a mixin.（Mixin 接受引數。這樣你就可以將變數傳遞給 mixin。）
Here is how to define a mixin with arguments（以下是如何定義帶引數的 mixin）
SCSS Syntax（SCSS 語法）
/* Define mixin with two arguments（/* 定義帶有兩個引數的 mixin */）*/
@mixin bordered($color, $width) {
border: $width solid $color;
}
.myArticle {
@include bordered(blue, 1px); // Call mixin with two values（// 使用兩個值呼叫 mixin）
}
.myNotes {
@include bordered(red, 2px); // Call mixin with two values（// 使用兩個值呼叫 mixin）
}
Notice that the arguments are set as variables and then used as the values (color and width) of the border property.（請注意，引數被設定為變數，然後用作 border 屬性的值（顏色和寬度）。）
After compilation, the CSS will look like this（編譯後，CSS 將如下所示）
Default Values for a Mixin（Mixin 的預設值）
It is also possible to define default values for mixin variables（也可以為 mixin 變數定義預設值）
SCSS Syntax（SCSS 語法）
@mixin bordered($color: blue, $width: 1px) {
border: $width solid $color;
}
Then, you only need to specify the values that change when you include the mixin（然後，當你包含 mixin 時，只需要指定要更改的值）
SCSS Syntax（SCSS 語法）
.myTips {
@include bordered($color: orange);
}
Using a Mixin For Vendor Prefixes（使用 Mixin 處理供應商字首）
Another good use of a mixin is for vendor prefixes.（Mixin 的另一個好用途是處理供應商字首。）
Here is an example for transform（這裡是一個關於 transform 的示例）
SCSS Syntax（SCSS 語法）
@mixin transform($property) {
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}
.myBox {
@include transform(rotate(20deg));
}
After compilation, the CSS will look like this（編譯後，CSS 將如下所示）
CSS Output（CSS 輸出）
.myBox {
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}
