LESS: создайте переменные способом, похожим на «вложенные правила» - PullRequest
Новая
       14

LESS: создайте переменные способом, похожим на «вложенные правила»

0 голосов
/ 29 мая 2019

На самом деле у меня есть несколько переменных LESS, определенных следующим образом: 

@toolbar-first-level-item-color-background:             @transparent-black-80;
@toolbar-first-level-item-color-background_hover:       @black;
@toolbar-second-level-item-color-background:            lighten(@toolbar-entry-color-background,30%);
@toolbar-second-level-item-color-background_hover:      lighten(@toolbar-entry-color-background_hover,30%);
@toolbar-third-level-item-color-background:             lighten(@toolbar-entry-color-background,40%);
@toolbar-third-level-item-color-background_hover:       lighten(@toolbar-entry-color-background_hover,40%);
@toolbar-fourth-level-item-color-background:            lighten(@toolbar-entry-color-background,45%);
@toolbar-fourth-level-item-color-background_hover:      lighten(@toolbar-entry-color-background_hover,45%);

Как видите, в нем есть несколько повторений, поэтому мне интересно, можно ли было бы использовать что-то вроде пространств имен или карт для создания более компактного и менее повторяющегося объявления.

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

1 Ответ

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

Я думаю, вы можете использовать карту .Это новая функция в Less lang, которая позволяет вам получать значения с помощью ключей.

Вы можете написать что-то вроде этого: 

@toolbar: {
  @first-level-item: {
    color-background: #fff;
  };
}

text {
  color: @toolbar[@first-level-item][color-background];
}
...