目录

一、一句话概括@mixin 与 @include

二、纯样式混入

三、带参数的混入样式

四、注意事项

五、实例

一、一句话概括@mixin 与 @include

        @mixin用于定义可以重复使用的样式，@include将定义的样式混入（就是添加）到对应的样式文件中，两者搭配使用目的在于提高样式代码的复用率。

二、纯样式混入

第一步：使用@mixin定义要复用样式

@mixin clearfix {
    &:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }
}

第二步：使用@include复用。

// 可以在scss文件中嵌套引入
.box {
    @include clearfix;
    color: red;
    fond-size: 16px;
    ...
}

// 直接引入到样式文件中
@include clearfix;
.box {
    color: red;
    fond-size: 16px;
    ...
}

三、带参数的混入样式

第一步：定义带参数的混入样式。

// 无默认值
@mixin radius($width, $size, $color) {
    width: $width;
    height: $width;
    border-radius: $width;
    border-width: $size;
    border-color: $color;
}

// 带有默认值
@mixin radius($width：200px, $size: 10px, $color: #EEEEEE) {
    width: $width;
    height: $width;
    border-radius: $width;
    border-width: $size;
    border-color: $color;
}


// 可变参数：即参数不确定
@mixin box-shadow($shadows...) {
      box-shadow: $shadows;
      -moz-box-shadow: $shadows;
      -webkit-box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

第二步: 复用。

@include radius(200px, 10px, #EEEEEE);

四、注意事项

1. Sass 的连接符号 - 与下划线符号 _ 是相同的，也就是 @mixin name-type { } 与 @mixin name_type { } 是一样的混入。
2. 动态传参数的时候需要带全参数单位。
3. 定义的混入语法需要引入到需要混入的文件中才可以生效。

五、实例

实例1：浏览器前缀使用混入语法

@mixin transform($property：rotate(10deg)) {
  transform: $property;
  -webkit-transform: $property;
  -ms-transform: $property;
}

.myBox {
  @include transform(rotate(20deg));
}

最终都会编译成CSS样式文件。

.myBox {
  transform: rotate(20deg);
  -webkit-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
}

最后

以上就是想人陪小蝴蝶为你收集整理的Sass @mixin 与 @include一、一句话概括@mixin 与 @include二、纯样式混入三、带参数的混入样式四、注意事项五、实例的全部内容，希望文章能够帮你解决Sass @mixin 与 @include一、一句话概括@mixin 与 @include二、纯样式混入三、带参数的混入样式四、注意事项五、实例所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。