javascript - 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 ---

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

Answer 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;
}