【SCSS】2.7 @Mixins(混合) + @include(擴充 / 繼承)

本來只想寫試寫Mixins，不過偷剪BootStrap的範例時，發現他是連同include寫在一起，我不會拆開，索性一起貼上試跑看看，誒...然後...他就轉譯成功了......


官方說法（然後我看完並不懂他再說什麼）：
http://sass.bootcss.com/docs/sass-reference/#control_directives
Mixins允許您定義可以在整個樣式表中重複使用的樣式，而無需使用非語義類.float-left。Mixins還可以包含完整的CSS規則，以及Sass文檔中其他地方允許的任何其他規則。他們甚至可以採取一些參數 ，這些參數可以讓你用很少的mixin來製作各種各樣的風格。


看完程式碼後的理解：
Variables(變數) = 定義一個變數名，並決定這個變數名的值（可以是數字、單位、顏色...）
取用的時候直接寫 $變數名 
例如：

.color-primary {color: $primary;}

.color-warning {color: $warning;}

@Mixins(混合) = 定義一個名字，並決定這個名字的樣式

取用的時候要搭配@include

使用在偽元素 ::before、::after、:hover，或是前綴（要定義很多屬性），格外好用。

例如：

//文字溢位符...

@mixin text-truncate() {

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}

.text-truncate { @include text-truncate; }

Variables(變數) 就是定義一個值，@Mixins(混合) 就是做一堆事，兩者都是為了

1. 重複使用（方便管理）
2. 寫更少code

語法範例SCSS

.color-primary {color: $primary;}

.color-warning {color: $warning;}

編譯後CSS，跟上一個單元是一樣的

//文字溢位符...

@mixin text-truncate() {

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}

.text-truncate { @include text-truncate; }

=========我是題外話的分割線===========

工程師佛心的用人類的語言解釋，
這個例子比上面的略微複雜一點點，
大家就試著了解吧！...
至於你問我，聽完專業人士說明以後我有沒有懂？

誒........
聽完以後我覺得....很餓