SASS中的動態類名稱

Question

我是SASS的新手。 我想用動態類名創建一個元素，然后可以在我的SASS中輕松控制它。 類似於下面的兩個偽示例之一。 我該如何在SASS中執行此操作？ 謝謝！

示例1：

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

--- ASS ---

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

范例2：

-React JS-

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

--- ASS ---

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