Question

我有以下示例代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

我认为它是箭头，但在使用它时它并没有按预期工作。

如果所有LESS符号都有一些文档，请链接我，以便我可以重新熟悉自己。

编辑：寻找类似的内容：

＆＃13;

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

＆＃13;

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

＆＃13;

谢谢=）

Answer 1

您可以使用LESS & selector：

执行此操作

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

  &.red {
    background: red;
  }

  &.blue {
    background: blue;
  }

  &.green {
    background: green;
  }
}

Answer 2

你可以这样做：

＆＃13;

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

＆＃13;

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

＆＃13;

与LESS类似的类特定样式

2 个答案: