scss 的extend和mixin的写法

extend

extend 是继承一个 scss 选择器内的css属性
如下代码:

.button-base {
  border: 1px solid #ddd;
  border-radius: 4px;
  outline: none;
  background-color: #eee;
  padding: 4px 7px;
}

.button-disable {
  border: 1px solid red;
  @extend .button-base; 
}
.button-active {
  border: 1px solid green;
  @extend .button-base; 
}

会被编译成

.button-base,
.button-disable,
.button-active {
  border: 1px solid #ddd;
  border-radius: 4px;
  outline: none;
  background-color: #eee;
  padding: 4px 7px;
}

.button-disable {
  border: 1px solid red;
}

.button-active {
  border: 1px solid green;
}

可以看到, 使用了 @extend 关键字后, 会给它添加和它父类一样的属性
适用情景:如上代码, 如果有很多种按钮, 这些按钮的基本样式是一样的, 比如没有outline, 内边距固定的, 只需要添加或更改几条css属性就可以生成不同的button, 那么就可以用extend

mixin

如下scss代码, 可以把backImage看成是一个函数

@mixin backImage($imageUrl) {
  background-image: $imageUrl;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.button-back {
  border: 1px solid black;
  @include backImage(url('../image/a.png'));
}

生成的css:

.button-back {
  border: 1px solid black;
  background-image: url("../image/a.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

mixin 可以看成是一个函数, 可以提供一些基础的属性, 同时可以传入参数调整css
适用情景: 不同button有不同的背景(图片), 但是background一堆的代码很多, 可以用mixin生成固定的代码, 也可以传入参数使其生成不同的css