Css Sass混入冗余
有没有更好的办法解决这个问题。我的mixin include开始重复,不知道是否有更好的方法:Css Sass混入冗余,css,sass,Css,Sass,有没有更好的办法解决这个问题。我的mixin include开始重复,不知道是否有更好的方法: @mixin button-type($name, $bgColor, $borderColor, $color, $hoverBg, $hoverColor) { .btn-#{$name} { background-color : $bgColor; border-color : $borderColor; color : $color;
@mixin button-type($name, $bgColor, $borderColor, $color, $hoverBg, $hoverColor) {
.btn-#{$name} {
background-color : $bgColor;
border-color : $borderColor;
color : $color;
&:hover {
background-color : $hoverBg;
border-color : $borderColor;
box-shadow : 0 0 5px rgba(0, 0, 0, .5);
color : $hoverColor;
}
}
}
@include button-type('warning', #fff, $dark-blue, $black, $dark-blue, #fff);
@include button-type('primary', #fff, $dark-blue, $black, $dark-blue, #fff);
@include button-type('active', #fff, $dark-blue, $black, $dark-blue, #fff);
您可以创建另一个mixin,该mixin使用所需属性的硬编码值调用您的mixin:
@mixin dark-blue-button-type($name) {
@include button-type($name, #fff, $dark-blue, $black, $dark-blue, #fff);
}
因此,称之为:
@include dark-blue-button-type('warning');
@include dark-blue-button-type('primary');
@include dark-blue-button-type('active');
到底是什么问题?你不想每次都拼出
#fff、$深蓝、$black、$深蓝、#fff
?或者您不喜欢每次mixin调用生成的重复CSS?谢谢您的帮助。很好!