是否有可能使以下CSS样式更像SCSS,并且避免在每个标题标记之后重复b:之后?
h1 b:after {
height: 0.7rem;
bottom: 1.0rem;
}
h2 b:after {
height: 0.6rem;
bottom: 0.6rem;
}
h3 b:after,
h4 b:after {
height: 0.3rem;
bottom: 0;
}
谢谢!
答案 0 :(得分:5)
一种可以缩短代码并提供一些可重用性的方法是使用mixin:
@mixin someMixin($height, $bottom) {
& b:after {
height: $height;
bottom: $bottom;
}
}
h1 { @include someMixin(0.7rem, 1.0rem); }
h2 { @include someMixin(0.6rem, 0.6rem); }
h3, h4 { @include someMixin(0.3rem, 0); }