sass的mixin,extend,placeholder,function

Posted mengff

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了sass的mixin,extend,placeholder,function相关的知识,希望对你有一定的参考价值。

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的主要内容,如果未能解决你的问题,请参考以下文章

html Sass mixin / extend /占位符比较

sass的mixin,extend,placeholder,function

scss 如何将它变成漂亮的SASS mixin?与@extend?

关于SASS的一些碎碎念

Scss 基本使用 ( @extend @mixin@import@if@for@while@each )

SASS - @extend(继承)指令