#### 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;
}
~~~
- 布局
- display:table布局
- display:flex弹性布局
- html
- 1.1关于文字小技巧
- 1.2加载
- 1.3苹果和安卓样式兼容问题
- 1.4结构技巧
- 1.5兼容ie7，ie8技巧
- css
- 1.1内容不够，页面固定在底部
- 1.2 css属性书写顺序
- 1.3font和line-height之CSS代码书写顺序不同，导致显示效果不一样
- 1.4 flex设置成1和auto有什么区别
- 1.5带三角形的对话框
- 1.6css选择器
- 1.6.1通用兄弟选择器E ~ F
- 1.6.2相邻兄弟选择器E + F
- 1.6.3 CSS3结构选择器
- 1.6.4 属性选择器
- 1.6.7 class^=,class*= ,class$= 的含义
- 1.7伪类
- 1.7.1:not(s)
- 1.9inherit和 initial
- 2.0 css技巧
- css3
- 1.2 背景background
- 1.3 transform
- 1.3.1移动translate
- 1.3.2缩放scale
- 1.3.3旋转rotate
- 1.3.4扭曲skew
- 1.4 Transition
- 1.5 animate
- 1.6 calc()
- 1.7 Gradients渐变
- 1.8 backface-visibility
- 1.9 text-size-adjust
- sass知识点
- 1.1sass写法转化
- 1.1.1 sass的转换写法
- 1.2 & 嵌套写法
- 1.2变量
- 1.2.1 默认值
- 1.2.2 全局变量和局部变量
- 1.2.3 嵌套
- 1.2.4 伪类选择器
- 1.2.5变量用井号花括号包裹
- 1.2.6 多个变量一起声明
- 1.3混合宏
- 1.3.1不带参数的混合宏
- 1.3.2传一个不带值的参数
- 1.3.3传多个不带值的参数
- 1.3.4传一个参数的值
- 1.3.5传多个参数的值
- 1.3.6参数变量名后面加...（省略号）
- 1.4文件导入
- 1.5继承@extend
- 1.6占位符%
- 1.7混合宏VS继承VS占位符
- 1.8 @media在sass中写法
- 1.9 @content的作用
- sass基本运算
- 1.1[Sass运算]加法
- 1.2[Sass运算]减法
- 1.3[Sass运算]乘法
- 1.4[Sass运算]除法
- sass函数
- 1.1 @if函数
- 1.2for函数
- 1.3 while函数
- 1.4 each循环
- 函数
- 1.1一些函数的意思
- 1.2if else函数
- 1.3 i++和++i的区别
- 1.4for函数
- UI设计规则
- 1.1字体
- 1.2尺寸
- 1.3 注意点
- 1.4 界面设计注意点