CSS 和 .less : Set a font color if user pick a specific color through web interface

Question

我有一个网络界面，用户可以在其中为 h1 元素选择颜色。我将这个选择存储在一个调用@color1 的变量中

对于特定颜色 (#333) 与背景的对比并不好，因此如果用户选择 #333，将强制特定颜色为 #fff。

我怎样才能用更少的时间执行它？

我试过了，但是没用:

h1 (@color1:#fff) when (@color1=#333) {
    color:@color1;
}

Answer 1

LESS 不处理 if/else 语句。相反，它提供 protected 混入(当参数存在或等于/劣于/优于某物时的混入)。

在 Less 中，您可以使用 guard mixin，例如:

@body:#333;
h1 {
  color: yellow;
}
h1 when (@body = #000) {
  color: blue;
}
h1 when (@body = #333) {
  color: red;
}

演示

http://codepen.io/alexincarnati/pen/mJihw