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指令的一些使用，希望对你有帮助。