sass的mixin,extend,placeholder,function

Posted 2021-01-03 mengff

1. mixin

就是定义了一个函数，可以传参，并且设定默认值，css选择器可以通过@include来引用，mixin混入的代码，就是原样复制，不会合并，会造成冗余

例如：

@mixin br6($br6: 6px){ /* 传一个带值的参数 */
      border-radius: $br6;
}
div{
    @include br6();   /* 如果不传值就是6px,传值会覆盖原始值 */
}

再如：

@mixin icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}
 
.error-icon {
  @include icon;
  /*错误图标指定的样式... */
}
 
.info-icon {
  @include icon;
  /* 信息图标指定的样式... */
}

会生成：

.error-icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
  /*错误图标指定的样式... */
}
 
.info-icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
  /* 信息图标指定的样式... */
}

其中的.icon的代码是重复的。

2. @extend

是继承一个class，其会复制父class的内容，但是会合并，即父子用逗号隔开，写在一起，无多余的冗余代码

例如：

.icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}
 
.error-icon {
  @extend .icon;
  /*错误图标指定的样式... */
}
 
.info-icon {
  @extend .icon;
  /* 信息图标指定的样式... */
}

会生成：

.icon, .error-icon, .info-icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}
 
.error-icon {
  /*错误图标指定的样式... */
}
 
.info-icon {
  /* 信息图标指定的样式... */
}

3. %placeholder

相当于一个虚拟的class，是为了解决@extend直接继承class，父class会被生成的问题。
因为一个父class有可能只是用来被继承的，本身不会被使用，生成出来占用空间。占位符可以解决这个问题

例如：

%icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}
 
.error-icon {
  @extend %icon;
  /*错误图标指定的样式... */
}
 
.info-icon {
  @extend %icon;
  /* 信息图标指定的样式... */
}

生成为：

.error-icon, .info-icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}
 
.error-icon {
  /*错误图标指定的样式... */
}
 
.info-icon {
  /* 信息图标指定的样式... */
}

没有生成被继承的.icon这个class。%placeholder和@extend是配合使用的，没有替代之说。
%placeholder在@media中使用需要注意，不能在@media中直接写extend。

例如下面的会报错：

%icon {
  transition: background-color ease .2s;
  margin: 0 .5em;
}
 
@media screen {
  .error-icon {
    @extend %icon;
  }
 
  .info-icon {
    @extend %icon;
  }
}

正确的是(只将placeholder写在@media中，extend写在@media外面)：

@media screen {
  %icon {
    transition: background-color ease .2s;
    margin: 0 .5em;
  }
}
 
.error-icon {
  @extend %icon;
}
 
.info-icon {
  @extend %icon;
}

4. 自定义函数

@function可以自定义函数，可以在css选择器中直接引用，和mixin十分类似

例如:

@function double($n) {
　　@return $n * 2;
}

#sidebar {
　　width: double(5px);
}

 

 

参考：https://blog.csdn.net/kaosini/article/details/40615123