如何将父选择器用作Sass的后缀

我知道

.bg {
    &-orange { background-color: $orange; }
    &-yellow { background-color: $yellow; }
    &-blue { background-color: $blue; }
    &-green { background-color: $green; }
}

将变成

.bg-orange { background-color: $orange; }
.bg-yellow { background-color: $yellow; }
.bg-blue { background-color: $blue; }
.bg-green { background-color: $green; }

但是如果我想在结尾加上“bg”怎么办

.orange-bg { background-color: $orange; }
.yellow-bg { background-color: $yellow; }
.blue-bg { background-color: $blue; }
.green-bg { background-color: $green; }

---

我如何使用SASS实现这一点？有什么想法吗？

这就是mixin成为你朋友的地方：

---

你可以更酷，映射和循环你的颜色来分配任何东西，或者添加一个参数来交换颜色/属性位置，等等，但这只是一个概念的快速证明。干杯：）

您可以在函数和mixin中使用符号和访问父选择器，而无需将其作为参数传递

我可能会这样做：

要使其正常工作，您还需要一个字符串替换函数：

工作原理： SCSS

.bg {
  color: red;

  @include pre(blue) {
    color: blue;
  }
}

输出

.bg {
  color: red;
}

.blue-bg {
  color: blue;
}

用例：

• 傅先生
• span.foo
• 斯潘·福
• .foo.bar
• .foo.bar

您也可以使用IDs

更简单的解决方案

-bg {

    @at-root #{selector-append(".orange", &)} {
        color:orange;
    }// Here's the solution:
    @at-root #{selector-append(".yellow", &)} {
        color:yellow;
    }// Here's the solution:
    @at-root #{selector-append(".blue", &)} {
        color:blue;
    }
    @at-root #{selector-append(".green", &)} {
        color:green;
    }
}

将编译为

.orange-bg {
  color: orange;
}
.yellow-bg {
  color: yellow;
}
.blue-bg {
  color: blue;
}
.green-bg {
  color: green;
}

---

那里没有捷径。你没有反向树结构。拥有它们会很好。谢谢你的提示克里斯！我会试着解决。@Bengala没问题，如果你有更具体的想法，请告诉我，我们会帮你解决的。

.bg {
  color: red;
}

.blue-bg {
  color: blue;
}

-bg {

    @at-root #{selector-append(".orange", &)} {
        color:orange;
    }// Here's the solution:
    @at-root #{selector-append(".yellow", &)} {
        color:yellow;
    }// Here's the solution:
    @at-root #{selector-append(".blue", &)} {
        color:blue;
    }
    @at-root #{selector-append(".green", &)} {
        color:green;
    }
}

.orange-bg {
  color: orange;
}
.yellow-bg {
  color: yellow;
}
.blue-bg {
  color: blue;
}
.green-bg {
  color: green;
}