使CSS更加SCSS以避免重复

Question

是否有可能使以下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;
}

谢谢!

Answer 1

一种可以缩短代码并提供一些可重用性的方法是使用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); }