Scss @mixin 和 @extend 如何使用的问题

用法

关于@mixin和@extend用法十分相似,今天终于弄明白了二者的区别

@extend

@extend,有继承的意思,则可以理解为使用了@extend .类名即继承了该类的所有css代码

.father{
    background:pink
}
.son{
    @extend .father
    //则此时son的backgroud为Pink
}

%red{
    background:red;
    border:1px solid red;
}
.error{
    @extend %red
}

@mixin

如果有重复的地方需要使用带参数的css,则尽量使用@mixin

@mixin icon($color) {
  background: #fff;
  border: 1px solid transparent;
  color: $color;
  &.selected {
    border: 1px solid $color
  }
}
//使用方法
li:nth-child(4n+0) {
  .tags-item-icon {
    @include icon(#a4d09f)
  }
}