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

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

原样式代码

原样式代码

.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;
}