sass 混合指令 (Mixin Directives)详解

  • sass 混合指令 (Mixin Directives)详解已关闭评论
  • 14 次浏览
  • A+
所属分类:Web前端
摘要

​ 混合指令(Mixin)用于定义可重复使用的样式,避免了使用无语意的 class,比如 .float-left。混合指令可以包含所有的 CSS 规则,绝大部分 Sass 规则,甚至通过参数功能引入变量,输出多样化的样式。

​ 混合指令(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指令的一些使用,希望对你有帮助。