对于这种情况，我不确定如何在 scss 中制作组选择器

Question

我正在尝试学习 SCSS，但在尝试做某事时遇到了一个小障碍（如果您可以这样称呼的话）。

所以下面的代码可能是 non-logical，我正在努力实现的简化示例。:

.gt-button {
  // some css
  &.gt-button-alt-l {
    font-size: 2em;
  }
}

.gt-buttonset {
  // some css
  &.gt-button-alt-l > .gt-button {
    font-size: 2em;
  }
}

这将生成：

.gt-button.gt-button-alt-l {
  font-size: 2em;
}

.gt-buttonset.gt-button-alt-l > .gt-button {
  font-size: 2em;
}

所以我想知道如何从逻辑上取而代之 CSS：

.gt-button.gt-button-alt-l, .gt-buttonset.gt-button-alt-l > .gt-button {
  font-size: 2em;
}

我将如何获得高于生成的 CSS？我在 Sassmeister.com 中摆弄过，但我似乎无法以对我来说合乎逻辑的方式获得它。我也不太清楚将这两个 CSS 部分连接到所需生成的 CSS 部分的技术术语。

我必须补充一点，我确实让它像这样工作：

.gt-button {
  &.gt-button-alt-l, .gt-buttonset .gt-button-alt-l > & {
    font-size: 2em;
  }
}

但出于某种原因，这对我来说似乎不合逻辑。因为 .gt-buttonset 不是 child 或任何 .gt-button。所以把它放在那里感觉很奇怪。

我很想知道最后一个代码片段是否确实是执行此操作的方法，或者是否还有其他选择。如果还有其他选择我也想知道。

Answer 1

如果输出的 CSS 对您很重要，您可以利用 the @extend rule 来实现它：

来源 SCSS:

.font-size-two { font-size: 2em; }

.gt-button {
  // some css
  &.gt-button-alt-l {
    @extend .font-size-two;
  }
}

.gt-buttonset {
  // some css
  &.gt-button-alt-l > .gt-button {
    @extend .font-size-two;
  }
}

输出CSS:

.font-size-two, .gt-buttonset.gt-button-alt-l > .gt-button, .gt-button.gt-button-alt-l {
  font-size: 2em;
}

显然，缺点是您现在在 CSS.

中还有一个未使用的 .font-size-two class

就是说，您可能过于关注输出的细微差别 CSS-- 只要您的 SCSS 中的内容具有表现力、可维护性，并且不会生成一个 ton 的多余 CSS 输出，我认为这就足够了，不用担心正在进行所有可能的优化。请记住，如果您正在利用任何其他构建工具，将会有缩小和潜在的其他优化，并且 CSS 最终会非常快。

对于这种情况，我不确定如何在 scss 中制作组选择器

I'm not sure how to make a group selector in scss for this situation

css

sass