SASS 中的动态类名

Posted 2023-02-22

【中文标题】SASS 中的动态类名

【英文标题】：Dynamic class names in SASS

【发布时间】：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;