如何在LESS中根据特定类的存在为变量设置新值？

嘿，我懂你遇到的问题了——想在Less里根据.someClass下是否存在.anotherClass，动态调整@aVariable的值，对吧？之前尝试没成功大概率是因为没摸透Less变量的编译时作用域特性，它没法在同一个选择器里根据DOM结构动态改变变量值。下面给你几个可行的解决方案：

方案1：嵌套选择器覆盖变量（针对后代元素样式） #

如果你的需求是让.anotherClass自身的样式使用不同的变量值，直接用嵌套选择器覆盖变量就行，因为Less的变量是块级作用域，嵌套块内的变量不会影响外部：

.someClass {
  @aVariable: 100px;
  // .someClass自身的默认样式
  padding: @aVariable;

  // 当.someClass下存在.anotherClass时，覆盖变量并设置其样式
  & .anotherClass {
    @aVariable: 200px;
    width: @aVariable;
    margin: @aVariable / 2;
  }
}

编译后的CSS会是：

.someClass {
  padding: 100px;
}
.someClass .anotherClass {
  width: 200px;
  margin: 100px;
}

方案2：用:has()伪类区分父元素状态（针对父元素样式） #

如果你的需求是让.someClass自身的样式根据是否包含.anotherClass而变化，就需要借助CSS的:has()伪类来区分两种情况（注意：:has()需要现代浏览器支持，IE不兼容）：

// 先定义复用的样式混合宏，避免重复代码
.useVariableStyles(@var) {
  width: @var;
  height: @var;
  border-radius: @var / 10;
}

// 默认情况：.someClass下没有.anotherClass
.someClass:not(:has(.anotherClass)) {
  @aVariable: 100px;
  .useVariableStyles(@aVariable);
}

// 存在.anotherClass的情况
.someClass:has(.anotherClass) {
  @aVariable: 200px;
  .useVariableStyles(@aVariable);
}

编译后的CSS会生成两个选择器，浏览器会根据DOM结构自动应用对应的样式。

方案3：额外类名兼容旧浏览器 #

如果需要兼容不支持:has()的旧浏览器，可以给.someClass手动加一个额外类名（比如.someClass--with-another），通过类名切换变量：

.someClass {
  @aVariable: 100px;
  .useVariableStyles(@aVariable);

  // 当添加了额外类名时，覆盖变量
  &.someClass--with-another {
    @aVariable: 200px;
    .useVariableStyles(@aVariable);
  }
}

这种方式兼容性最好，缺点是需要在HTML里根据是否存在.anotherClass动态添加类名（可以用JS实现）。

关键提醒 #

Less的变量是编译时确定的，不是运行时动态计算的，所以没法在同一个.someClass选择器里“判断”后代元素是否存在再改变量。必须通过不同的选择器（嵌套、:has()、额外类）来区分场景，分别设置变量值。

内容的提问来源于stack exchange，提问作者yrslvrtfmv