Question

div{
  display: inline-block;
  border: 1px solid black;
  height: 100px;
  width: 100px;
}

#div1, #div2, #div3{
  background: red;
}

#div4, #div5, #div6{
  background: blue;
}

<html>
  <body>
    <div id="div0">0</div>
    <div id="div1">1</div>
    <div id="div2">2</div>
    <br><br>
    <div id="div3">3</div>
    <div id="div4">4</div>
    <div id="div5">5</div>
  </body>
</html>

出于实践原因，我想减少使用以使div的第一行为红色，第二行为蓝色。我研究了文档并编写了以下代码：

.generate-colors(6);
.generate-colors(@n, @i:0)when(@i<@n){
  .div@{i}{
    background: red;
  }
  .generate-colors(@n, (@i+1));
}

当@i大于2时，如何将背景颜色设置为蓝色？

Answer 1

您实际上不需要LESS；您可以结合使用CSS的 nth-of-type() 伪类和mars来选择第二行元素：n + 4。可以使用body > div:nth-of-type(n + 4)来定位两个现有的红色元素。这可以在以下内容中看到：

n + 2

div {
  display: inline-block;
  border: 1px solid black;
  height: 100px;
  width: 100px;
}

body > div:nth-of-type(n + 2) {
  background: red;
}

body > div:nth-of-type(n + 4) {
  background: blue;
}

就LESS而言，您可以执行以下操作：

<html>

<body>
  <div id="div0">0</div>
  <div id="div1">1</div>
  <div id="div2">2</div>
  <br><br>
  <div id="div3">3</div>
  <div id="div4">4</div>
  <div id="div5">5</div>
</body>

</html>

Answer 2

只需做两次相同的事情：

RewriteRule ^(.*)$ https://mysite.com.mx/sucursales/%1/$1 [L]

如何少使用预处理器进行条件循环

2 个答案: