sass混入（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指令的一些使用
















，希望对你有帮助  


  


  


。