sass 混合指令 (Mixin Directives)詳解

​ 混合指令（Mixin）用於定義可重覆使用的樣式，避免了使用無語意的 class，比如 .float-left。混合指令可以包含所有的 CSS 規則，絕大部分 Sass 規則，甚至通過參數功能引入變數，輸出多樣化的樣式。

​ mixin是可以重用的一組CSS聲明。mixin有助於減少重覆代碼，只需聲明一次，就可在文件中引用。

​ 可以看出，mixin類似變數，不同的是變數存儲值，mixin存儲一組css聲明。mixin可以傳入參數。

定義與使用混合指令 @mixin

@mixin mixin-name([param1,[param2...]]) {
	/* css 聲明 */
}

例1：標準形式

// 定義頁面一個區塊基本的樣式
@mixin block {
    width: 96%;
    margin-left: 2%;
    border-radius: 8px;
    border:1px #f6f6f6 solid;
}

// 使用混入
.container{
    .block{
        @include block;
	}
}

生成結果

.container .block { 
    width: 96%; 
    margin-left: 2%; 
    border-radius: 8px; 
    border: 1px #f6f6f6 solid; 
}

例2：嵌入選擇器

// 定義警告字體樣式,下劃線（_）與橫線（-）是一樣的
@mixin warning-text {
    .warn-text{
        font-size: 12px;
        color: rgb(255, 253, 123);
        line-height: 180%;
    }
}

// 使用混入
.container{
    @include warning-text;
}

編譯結果

.container .warn-text { 
    font-size: 12px; 
    color: #fffd7b; 
    line-height: 180%; 
}

例3：使用變數

// 定義flex佈局元素縱軸的排列方式
@mixin flex-align($aitem){
    -webkit-box-align:$aitem;
    -webkit-align-items:$aitem;
    -ms-flex-align:$aitem;
    align-items:$aitem;
}

// 只有一個參數，直接傳遞參數
.container{
    @include flex-align(center);
}
// 給指定參數指定值
.footer{
    @include flex-align($aitem:center);
}

例4：使用變數（多參數）

// 定義塊元素內邊距
@mixin block-padding($top,$right,$bottom,$left){
    padding-top: $top;
    padding-right: $right;
    padding-bottom: $bottom;
    padding-left: $left;
}

使用一

// 按照參數順序賦值
.container{
    @include block-padding(10px,20px,30px,40px);
}

使用二

// 可指定參數賦值
.container{
    @include block-padding($left:20px, $top:10px, $bottom: 10px, $right:30px);
}

只想設置兩個邊：

// 可指定參數賦值
.container{
    @include block-padding($left:10px, $top:10px, $bottom:0, $right:0);
}

問題：必須指定4個值?????

例5：指定預設值

// 定義塊元素內邊距，參數指定預設值
@mixin block-padding($top:0,$right:0,$bottom:0,$left:0){
    padding-top: $top;
    padding-right: $right;
    padding-bottom: $bottom;
    padding-left: $left;
}

靈活使用

// 可指定參數賦值
.container{
    // 不帶參數
    //@include block-padding;

    //按順序指定參數值
    //@include block-padding(10px,20px);

    //給指定參數指定值
    @include block-padding($left:10px,$top:20px)
}

例6：可變參數

參數不固定的情況

** 
    *定義線性漸變
    *@param $direction  方向
    *@param $gradients  顏色過度的值列表
 */
@mixin linear-gradient($direction, $gradients...) {
    background-color: nth($gradients,1);
    background-image: linear-gradient($direction, $gradients);
}

使用

.table-data{
    @include linear-gradient(to right,#F00, orange, yellow);
}

這就是“老姚”給大家整理的scss中混入@mixin指令的一些使用，希望對你有幫助。