sass扩展与@mixin混入的用法

1.@extend关键字，通过一个选择器来继承另一个选择器的样式，说白了，就是公用的css代码复用

/* sass 文件 */
/* 公用样式 */
.button {
  background-color: blue;
  color: white;
}
/* 下面直接使用@extend .button 复制上面的样式 */
.submit-button {
  @extend .button;
  font-size: 16px;
}

/* 通过编译后的css文件 */
.button,.submit-button  {
  background-color: blue;
  color: white;
}
.submit-button {
  font-size: 16px;
}

2.mixin混入的用法 @mixin与@include

/* sass文件 */
/* 定义一个公共的样式 */
@mixin common-style {
  background-color: blue;
  color: white;
  font-size: 16px;
}

.button {
  @include common-style;
}

.submit-button {
  @include common-style;
  font-weight: bold;
}

/* 编译后的css文件 */
.button  {
  background-color: blue;
  color: white;
  font-size: 16px;
}

.submit-button {
  background-color: blue;
  color: white;
  font-size: 16px;
  font-weight: bold;
}

相对于@extend而言 @mixin明显代码体积大一点，会冗余一点，但是我们一般都是维护sass文件，所以对于代码体积没有要求而言，影响可忽略不计

3.@mixin传参的用法

/* 定义一个common-style公用的类名，三个形参  */
@mixin common-style($background-color, $text-color, $font-size) {
  background-color: $background-color;
  color: $text-color;
  font-size: $font-size;
}
/* 使用时 传入相对应的实参 */
.button {
  @include common-style(blue, white, 16px);
}

.submit-button {
  @include common-style(green, black, 14px);
}
/* 编译后的css文件 */
.button {
  background-color: blue;
  color: white;
  font-size: 16px;
}
.submit-button {
  background-color: green;
  color: black;
  font-size: 14px;
}