当前位置：首页 > article >正文

【sass】sass中两种去重的方法：混合 - mixin/include、继承 - extend

article 2024/11/13 9:29:55

原样式代码

原样式代码

.tip {
  margin: 10px;
  padding: 10px;
  font-size: 14px;
  font-weight: bold;
}
.tip_success {
  margin: 10px;
  padding: 10px;
  font-size: 14px;
  font-weight: bold;
  color: green;
}
.tip_warning {
  margin: 10px;
  padding: 10px;
  font-size: 14px;
  font-weight: bold;
  color: orange;
}
.tip_error {
  margin: 10px;
  padding: 10px;
  font-size: 14px;
  font-weight: bold;
  color: red;
}

去重1 - 混合 mixin

去重样式代码

@mixin tip {
  margin: 10px;
  padding: 10px;
  font-size: 14px;
  font-weight: bold;
}
.tip_success {
  @include tip;
  color: green;
}
.tip_warning {
  @include tip;
  color: orange;
}
.tip_error {
  @include tip;
  color: red;
}

编译后样式代码

.tip {
  margin: 10px;
  padding: 10px;
  font-size: 14px;
  font-weight: bold;
}
.tip_success {
  margin: 10px;
  padding: 10px;
  font-size: 14px;
  font-weight: bold;
  color: green;
}
.tip_warning {
  margin: 10px;
  padding: 10px;
  font-size: 14px;
  font-weight: bold;
  color: orange;
}
.tip_error {
  margin: 10px;
  padding: 10px;
  font-size: 14px;
  font-weight: bold;
  color: red;
}

可以看到编译后代码与原代码一致，只是编写代码便捷了，没有起到简化的作用，

体积大，传输效率慢，会出现白屏问题

去重2 - 继承 @extend

继承类

去重样式代码

.tip {
  margin: 10px;
  padding: 10px;
  font-size: 14px;
  font-weight: bold;
}
.tip_success {
  @extend .tip;
  color: green;
}
.tip_warning {
  @extend .tip;
  color: orange;
}
.tip_error {
  @extend .tip;
  color: red;
}

编译后样式代码

.tip,
.tip_success,
.tip_warning,
.tip_error {
  margin: 10px;
  padding: 10px;
  font-size: 14px;
  font-weight: bold;
}
.tip_success {
  color: green;
}
.tip_warning {
  color: orange;
}
.tip_error {
  color: red;
}

编译后重复的代码都写在一起，代码比原代码简洁

继承抽象类

去重样式代码

%tip {
  margin: 10px;
  padding: 10px;
  font-size: 14px;
  font-weight: bold;
}
.tip_success {
  @extend %tip;
  color: green;
}
.tip_warning {
  @extend %tip;
  color: orange;
}
.tip_error {
  @extend %tip;
  color: red;
}

编译后样式代码

.tip_success,
.tip_warning,
.tip_error {
  margin: 10px;
  padding: 10px;
  font-size: 14px;
  font-weight: bold;
}
.tip_success {
  color: green;
}
.tip_warning {
  color: orange;
}
.tip_error {
  color: red;
}