有没有办法使用嵌入样式语法来简化（添加命名空间到）SCSS 中的多个类选择器？答案

【问题标题】：Is there a way to use embedding style syntax for simplifying ( adding namespace to ) multiple class selectors in SCSS?有没有办法使用嵌入样式语法来简化（添加命名空间到）SCSS 中的多个类选择器？
【发布时间】：2022-02-12 04:10:10
【问题描述】：

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

有没有办法将“命名空间”添加到编译为多个类选择器的类中。

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

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

【问题讨论】：

标签： class sass selector

【解决方案1】：

如果我正确理解您的问题，您正在寻找的是parent selector &：

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

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

【讨论】：