sass的mixin,extend,placeholder,function

sass中@mixin，%，@function区别

@mixin 使用@include引用，可传参，返回一段css样式，不用会生成一个class，生成结果是直接拷贝，这样多处引用，会造成代码重复

% 使用@extend引用，不可传参，返回一段css样式。%开头的class只是用来extend，不会生成在代码里。
生成后，多个class用逗号连接，提取成一个样式，减少重复代码

@function 与@mixin的最大不同，返回的是一个值，不是一段css样式

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

巴特西

sass的mixin,extend,placeholder,function

最新文章

热门文章