SASS 中的动态类名答案

【问题标题】：Dynamic class names in SASSSASS 中的动态类名
【发布时间】：2018-07-13 14:22:58
【问题描述】：

我是 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 ---

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

【问题讨论】：

我想你可能需要styled-components而不是sass，如果你想完全控制你的JS代码中的css元素github.com/styled-components/styled-components

【解决方案1】：

您无法通过 React 控制 SASS，因为一旦您将其编译为 CSS，它就基本上是静态的。

但是，如果您将 SASS 更改为以下内容，我认为您的第二个示例将起作用：

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

这将编译为以下 CSS：

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

【讨论】：