Повторное использование сгенерированных CSS-классов в качестве миксинов - PullRequest
Новая
       7

Повторное использование сгенерированных CSS-классов в качестве миксинов

0 голосов
/ 28 февраля 2019

Я сгенерировал функцию веса шрифта для своего приложения, которое использует Less.Проблема в том, что я не могу объявить это в своем коде Less.Принимая во внимание, что если я встроил в HTML, он работает нормально.

Вот код, который я использую:

Меньше: 

@fontSelectors: 300, 400, 700, 900;
each(@fontSelectors, {
  .font-@{value} { font-weight: @value; }
});

.font-700; // Error 
h1 { .font-700; } // Error

HTML: 

<div class="font-700"></div> <!-- Working -->

Что я делаю не так?Как объявить для какого-то другого параметра класса тоже?

Кто-нибудь может мне помочь?

Спасибо

1 Ответ

0 голосов
/ 28 февраля 2019

отметьте это 

.fontgenerator(@value){
   .font-@{value} { font-weight: 1px * @value; }
}

.fontgenerator(300);
.fontgenerator(400);
.fontgenerator(700);
.fontgenerator(900);

, чтобы ваш код 

 @fontSelectors: 300, 400, 700, 900;

each(@fontSelectors, {
  .font-@{value} { font-weight:1px * @value; }
});

с таким выводом 

.font-300 {
  font-weight: 300px;
}
.font-400 {
  font-weight: 400px;
}
.font-700 {
  font-weight: 700px;
}
.font-900 {
  font-weight: 900px;
}

, и вы можете использовать его

...