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更改为以下内容，我认为您的第二个示例将起作用：

else
{
   while ( infile >> number )
   {
      count1++;

      if (number % 2 != 0)
      {
         odd++;
      }
      else
      {
         even++;
      }
   }
}

将编译为以下CSS：

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

SASS中的动态类名

1 个答案: