#### 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; } ~~~