SASS中的动态类名

Question

我对SASS不熟悉。我想创建一个带有动态类名的元素，以便能够在我的SASS中轻松地控制它。就像下面两个伪代码示例之一。我该如何在SASS中实现这个功能？谢谢！

示例1：

--- React JS ---
<div className={this.state.onClick ? "menu-on" : "menu-off"}></div>

--- SASS ---

.menu-{x} {
  x = "on": {
    background-color: blue;
  }
  x = "off": {
    background-color: red;
  }
}

例子 2：

--- React JS ---

<div className={"menu " + (this.state.onClick ? "on" : "off")}></div>

--- SASS ---

这段代码展示了如何在 React 中使用类名实现菜单的开关。当点击后，会添加一个名为 "on" 的类名，否则添加 "off" 类名。该功能可以通过以下方式在 SASS 中实现：

.menu {
  .on {
    background-color: blue;
  }
  .off {
    background-color: red;
  }
}

- Jimmy

---

我认为如果你想在JS代码中完全控制CSS元素，你可能需要使用styled-components而不是sass。https://github.com/styled-components/styled-components - FisNaN

Answer 1

一旦将SASS编译成CSS，它就基本上是静态的，因此你无法从React中控制SASS。

然而，如果你将SASS更改为以下内容，我认为第二个例子会起作用：

.menu {
  &.on {
    background-color: blue;
  }
  &.off {
    background-color: red;
  }
}

这将编译为以下CSS：

.menu.on {
    background-color: blue;
}
.menu.off {
    background-color: red;
}

- net.uk.sweet