Как я могу использовать цикл в LESS для создания определенных имен классов для типографики? - PullRequest
Новая
       15

Как я могу использовать цикл в LESS для создания определенных имен классов для типографики?

1 голос
/ 30 июня 2019

Я хочу сгенерировать 9 классов книгопечатания, каждый со следующим: 

font-size: 2rem;
line-height: 1rem;

Я буду использовать стандартные типографские множители для размеров шрифта и высоты строки. Вместо того, чтобы жестко программировать все эти классы CSS, мне было интересно, есть ли более элегантный способ генерирования их в цикле с использованием LESS.

Я нашел следующее из другой темы: 

@iterations: 5;
.span-loop (@i) when (@i > 0) {
    .span-@{i} {
        width: ~"@{i}%";
    }
    .span-loop(@i - 1);
}
.span-loop (@iterations);

, который генерирует: 

.span-5 {
  width: 5%;
}
.span-4 {
  width: 4%;
}
.span-3 {
  width: 3%;
}
.span-2 {
  width: 2%;
}
.span-1 {
  width: 1%;
}

Это довольно близко, но я бы хотел, чтобы имена моих классов были более "именованными". Как я могу использовать цикл для генерации классов для: 

.small { }
.caption { }
.body { }
.subheader { }
.title { }
.headline { }

и т.д ...

Я также не привязан к LESS, поэтому, если есть лучший язык препроцессора CSS, я с радостью использую его вместо этого:)

Спасибо!

1 Ответ

0 голосов
/ 30 июня 2019

Пример из документации для дальнейшей модификации;) для более сложного кода лучше использовать scss, чем меньше 

.for(@list, @code) {
  & {
    .loop(@i: 1) when (@i =< length(@list)) {
      @value: extract(@list, @i);
      @code();
      .loop(@i + 1);
    }
    .loop();
  }
}

@elements: small, caption, body, subheader, title, headline;

.for(@elements, {
  @remfont: @i+1;
  @remline: ((@i+1) * 1.5 / 3);
  .@{value} {
    font-size: ~"@{remfont}rem";
    line-height: ~"@{remline}rem";
  }
});
...