有没有一种方法可以使用嵌入样式语法来简化（添加命名空间）SCSS 中的多个 class 选择器？

Question

我有包含 background-image 和 background-size 属性的图标 classes。我想用前缀 .icon 来保护这些 classes 的名称。然后我可以开始写出 .icon.profile、.icon.search 等选择器。如果是 .icon .profile、.icon .search 等，那么我可以使用 embedding is SCSS 来巧妙地保护命名空间。但是，嵌入不适用于多个 class 选择器，因为它会选择子节点。我用过SCSS，每次都把前缀写出来，感觉很不智能。使用 DOM 中的嵌入来支持 SCSS 中的嵌入是矫枉过正且昂贵的（增加了 DOM 元素的不必要的复杂性）。

有没有办法将“命名空间”添加到 class 编译成多个 class 选择器的元素。

//////////////////////////////////////////////////////////////
// icons
.icon.search {
  background-image: url(...);
  background-size: cover;
}

.icon.profile {
  background-image: url(...);
  background-size: cover;
}
//////////////////////////////////////////////////////////////

Answer 1

如果我对你的问题的理解正确，你正在寻找的是 parent selector &:

.icon {
  &.search {
    background-image: url(...);
    background-size: cover;
  }

  &.profile {
    background-image: url(...);
    background-size: cover;
  }
}

有没有一种方法可以使用嵌入样式语法来简化（添加命名空间）SCSS 中的多个 class 选择器？

Is there a way to use embedding style syntax for simplifying ( adding namespace to ) multiple class selectors in SCSS?

class

sass

selector