Менше - використання класів, створених всередині охоронюваних змішувачів - css, менше

У мене є такий менший код:

.loop (@index) when (@index >= 10) {
(~".font@{index}") {
font-size: ~"@{index}px";
}
.loop(@index - 1);
}
.loop (0) {}
.loop (10);

який вихід:

.font15 {
font-size: 15px;
}
.font14 {
font-size: 14px;
}
.font13 {
font-size: 13px;
}
.font12 {
font-size: 12px;
}
.font11 {
font-size: 11px;
}
.font10 {
font-size: 10px;
}

Зрештою Менше Документ у мене є цей клас:

.title{
font-size:14px;
margin-bottom:0.5em;
.font13;
}

Я використовую WinLess, щоб скомпілювати його, і я отримую помилку, кажучи, що ".font13" не визначено Чи є спосіб використовувати клас, визначений "динамічно" в одному документі?

Дякую!

Відповіді:

5 за відповідь № 1

На жаль. Інтерполяція селектора - це просто інтерполяція рядків, і рядок одержується потім в CSS, тому об'єкт класу не генерується в прогоні Less.

Тож найкращим способом зробити щось подібне було б розробити дизайн геттер міксин (що ви можете зателефонувати з інших правил) і, можливо, змішувач генератора (який пише .font10, .font11, ... .fontNN класи) ... пізніше це не потрібно, якщо ви хочете генерувати класи лише у циклі (і ви можете просто об'єднати його з циклом).

Щось на зразок цього:

.getFont(@size) { font-size: ~"@{size}px"}

.genFontClass (@size) {
(~".font@{size}") { .getFont(@size); }
}

а потім ви можете використовувати свій цикл для створення .fontNN класи:

.loop (@index) when (@index >= 10) {
.genFontClass (@index);
.loop(@index - 1);
}
.loop (@index) when (@index < 10) {}

використовуючи, наприклад, індекс 13:

.loop (13);

з виходом CSS:

.font13 {
font-size: 13px;
}
.font12 {
font-size: 12px;
}
.font11 {
font-size: 11px;
}
.font10 {
font-size: 10px;
}

і незалежно від цього генеруються класищо надруковано безпосередньо на вихідний CSS (і вони недоступні для інших менших правил), ви можете зателефонувати до getter mixin, щоб додати потрібні властивості до своїх правил, у нашому прикладі шрифт для потрібного індексу 13:

.title{
margin-bottom:0.5em;
.getFont(13);
}

який тепер додасть властивість розміру шрифту до .title правити

CSS:

.title {
margin-bottom: 0.5em;
font-size: 13px;
}

Сподіваюся, це допоможе.

---