Как использовать препроцессор меньше для условного цикла - PullRequest
Новая
       8

Как использовать препроцессор меньше для условного цикла

0 голосов
/ 11 октября 2018 

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>

Я хочу использовать меньше, чтобы сделать первый ряд divs красным и второй ряд синим по практическим соображениям.Я изучил документацию и написал следующий код: 

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

Как я могу сказать меньше, когда @i больше 2, установить цвет фона на синий?

Ответы [ 2 ]

0 голосов
/ 11 октября 2018

Просто сделайте одно и то же дважды: 

.generate-colors1(2);
.generate-colors1(@n, @i:0)when(@i<@n){
  .div@{i}{
    background: red;
  }
  .generate-colors1(@n, (@i+1));
}
.generate-colors2(6);
.generate-colors2(@n, @i:3)when(@i<@n){
  .div@{i}{
    background: blue;
  }
  .generate-colors2(@n, (@i+1));
}
0 голосов
/ 11 октября 2018

Вам на самом деле не нужно МЕНЬШЕ для этого;Вы можете использовать псевдо-класс CSS 'nth-of-type() в сочетании с 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;
}
<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>

С точки зрения МЕНЬШЕ, вы можете сделать это с: 

body {
    >div {
        &:nth-of-type(n {
            &+2) {
                background: red;
            }
            &+4) {
                background: blue;
            }
        }
    }
}
...