与 LESS 相似的 class 特定样式

Question

我有以下示例代码：

div.box {
    width: 50px;
    height: 50px;
}

div.box.red { background: red; }
div.box.blue { background: blue; }
div.box.green { background: green; }

<div class="red box"></div>
<div class="blue box"></div>
<div class="green box"></div>

这是非常多余的，我正在寻找一种更有效的方法来做到这一点，我相信你可以在 LESS 中做到这一点，但我只是不记得如何做到这一点。

我认为是箭头的问题，但当我使用它们时却没有按预期工作。

如果有关于所有 LESS 符号的文档，请 link 给我，这样我可以重新熟悉一下。

编辑：寻找这样的东西：

div.box {
    width: 50px;
    height: 50px;

    > .red { background: red; }
    > .blue { background: blue; }
    > .green { background: green; }
}

<div class="red box"></div>
<div class="blue box"></div>
<div class="green box"></div>

谢谢=)

Answer 1

您可以使用 LESS & selector:

div.box {
  width: 50px;
  height: 50px;

  &.red {
    background: red;
  }

  &.blue {
    background: blue;
  }

  &.green {
    background: green;
  }
}

Answer 2

你可以这样做：

div.box {
    width: 50px;
    height: 50px;
}
.red { background: red; }
.blue { background: blue; }
.green { background: green; }

<div class="red box">R</div>
<div class="blue box">B</div>
<div class="green box">G</div>

与 LESS 相似的 class 特定样式

Similar class-specific styling with LESS

css

less