如果 LESS 变量为 1，则将 CSS 添加到元素答案

【问题标题】：If LESS variable is 1 add CSS to element如果 LESS 变量为 1，则将 CSS 添加到元素
【发布时间】：2025-11-30 12:25:02
【问题描述】：

我觉得这很简单。如果 less 变量等于 1，我需要将 CSS 添加到元素中。它是一种开/关开关。我尝试了一些关于警卫的教程，但我认为我的方法不对。我的代码：

@switch = 1
#element() when (@switch = 1) {
color: red;
}

【问题讨论】：

标签： css less

【解决方案1】：

首先，您使用@switch: <value>; 声明一个变量然后从元素中删除() 并在选择器主体内使用& when (@switch = 1) 条件。

@switch: 1;

#element {
    & when (@switch = 1) {
        color: red;
    }

}

或者您可以使用如下内联 if 函数：

#element {
  color: if((@switch = 1), red, blue);
}

后者与任何其他语言中的三元运算符相同，第一个参数是逻辑运算符，如果条件为真，则为第二个值，否则为其他值。

【讨论】：

【解决方案2】：

您定义的变量不正确。您需要使用: 而不是=。

@switch: 1;
  #element when ( @switch = 1) {
     color: red;
}

编译为：

#element {
  color: red;
}

如果条件满足。

【讨论】：

【解决方案3】：

原来我有一个旧的 LESS 版本。此链接的第一个解决方案有帮助： https://github.com/less/less-docs/blob/master/content/features/css-guards.md

【讨论】：