sass 混合指令 (Mixin Directives)详解

AI助手支持GPT4.0

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