如何在没有冗余 SCSS 的情况下对具有相同 class 的元素进行分组

Question

我有这个样式，我想把它分组，这样多余的字符集就会消失。

      [class*='col'] h1,
      [class*='col'] h2,
      [class*='col'] h3,
      [class*='col'] h4,
      [class*='col'] h5,
      [class*='col'] h6,
      [class*='col'] .h1,
      [class*='col'] .h2,
      [class*='col'] .h3,
      [class*='col'] .h4,
      [class*='col'] .h5,
      [class*='col'] .h6 {
        margin-top: 1.5rem;
        margin-bottom: 0.75rem;
      }

Answer 1

也许你可以用 :is() 把它写得更干净 CSS pseudo-class 它可以用一个更干净的选择器来完成。

例如，您可以通过以下方式定位某个容器元素内的所有标题

[class*='col'] :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6)
{
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

大多数浏览器现在都支持 :is()，但请记住，大多数 2020 年之前制造的浏览器不支持没有前缀的它，因此如果您需要支持旧版浏览器，请谨慎使用它。

如果您想要 SASS 解决方案，您可以使用此 mixin

@mixin headings {
  [class*='col'] h1,
  [class*='col'] h2,
  [class*='col'] h3,
  [class*='col'] h4,
  [class*='col'] h5,
  [class*='col'] h6,
  [class*='col'] .h1,
  [class*='col'] .h2,
  [class*='col'] .h3,
  [class*='col'] .h4,
  [class*='col'] .h5,
  [class*='col'] .h6 {
        @content;
    }
}

像这样使用它：

@include headings {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

如何在没有冗余 SCSS 的情况下对具有相同 class 的元素进行分组

how to group elements with same class without redundancy SCSS

sass