#### 1.3.5 傳多個帶值的參數 a.**調用時括號不加值**，則轉化成css是聲明混合宏時默認變量參數的值 列：sass樣式 ~~~ @mixin demo7($background:#f9f9f9,$border:2px solid #000,$font-size:14px){ background:$background; border:$border; font-size:$font-size; } .demo7{ @include demo7; } ~~~ 轉化成css的樣式 ~~~ .demo7 { background: #f9f9f9; border: 2px solid #000; font-size: 14px; } ~~~ b.**調用時括號里面輸入值時**，則轉化成css是的值是調用時括號里面的值 *注意：調用時可直接傳入值，如@include調用傳入參數的個數小于@mixin定義參數的個數，則按照順序表示，后面不足的使用默認值，如不足的沒有默認值則報錯。除此之外還可以選擇性的傳入參數，使用參數名與值同時傳入* 列：sass樣式 ~~~ @mixin horizontal-line($border:1px dashed #ccc, $padding:10px){ border-bottom:$border; padding-top:$padding; padding-bottom:$padding; } ~~~ ~~~ .imgtext-h-1 li{ @include horizontal-line(1px solid #ccc); }//傳入一個參數值，其他不變，則第一個變量參數改變，其他的按照混合宏默認變量參數 .imgtext-h-2 li{ @include horizontal-line(1px solid #ccc,20px); }//傳入多個參數值時，需要逗號分開 .imgtext-h-3t li{ @include horizontal-line($padding:15px); }//此為選擇性的傳入參數值，直接變量參數同名重新定義值 ~~~ 轉化成css樣式 ~~~ .imgtext-h li { border-bottom: 1px solid #cccccc;/*此為調用括號里面的參數值*/ padding-top: 10px;/*此為混合宏聲明時的默認參數*/ padding-bottom: 10px;;/*此為混合宏聲明時的默認參數*/ } .imgtext-h-2 li { border-bottom: 1px solid #ccc;/*此為調用括號里面的參數值*/ padding-top: 20px;/*此為調用括號里面的參數值*/ padding-bottom: 20px;/*此為調用括號里面的參數值*/ } .imgtext-h-3 li { border-bottom: 1px dashed #cccccc;;/*此為混合宏聲明時的默認參數*/ padding-top: 15px;/*此為調用括號里面的參數得值*/ padding-bottom: 15px;/*此為調用括號里面的參數值*/ } ~~~ c、**調用時選擇性傳入值，調用（）括號里變量參數A重新定義時，值用變量B**，則轉化成css是變量B的值。 注意：變量B需在變量A的混合宏之前聲明，之后聲明會報錯。 列：sass樣式 `$color2:#000;//之前聲明的變量值` ~~~ @mixin demo8-color($font-size:14px, $bg-color2:#eee, $bg-color3:#666){ color:$bg-color3; background:$bg-color2; font-size:$font-size; } .demo8{ @include demo8-color(16px,$bg-color2:$color2); } ~~~ 轉化成css樣式 ~~~ .demo8 { color: #666;//混合宏聲明時的值 background: #000;//外在之前聲明的值 font-size: 16px;//調用時重新聲明的值。 } ~~~ d：當混合宏花括號{ }里面的樣式**不用混合宏（）聲明的變量A，用之前外在變量B聲明的值**，則轉化成css是外在變量B聲明的值。 注：變量B需在變量A的混合宏之前聲明，之后聲明會報錯。 列：sass樣式 `$color3:#000;` ~~~ @mixin demo8-color($font-size:14px,$bg-color3:#666){ color:$bg-color3; background:$color3; font-size:$font-size; } .demo8{ @include demo8-color(16px); } ~~~ 轉化成css樣式 ~~~ .demo8 { color: #666; background: #000;//外在變量聲明的值 font-size: 16px; } ~~~