css - 使 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); }