作者:lluuaalulua619 | 来源:互联网 | 2023-01-01 08:24
是否有可能使以下CSS样式更像SCSS,并避免重复b:after为每个标题标记?
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;
}
谢谢!
1> chazsolo..:
一种可以缩短代码并提供一些可重用性的方法是使用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); }