меньше - расширение селекторов в цикле - PullRequest
Новая
       6

меньше - расширение селекторов в цикле

0 голосов
/ 11 апреля 2020

Я хочу создать две служебные «функции», которые расширят селекторы в al oop. Вот что я придумал: 

/* Extends all of the selectors passed. */
.extend (@dest; @selectors) {
    each(@selectors, {
        @{value} {
            &:extend(@{dest});
        }
    })
}

/* Loop extends a selector, such as h1, h2, h3... */
.extendLoop (@dest; @selector; @start: 1; @end: 6; @incr: 1) when (@start <= @end) {
    @{selector}@{start} {
        &:extend(@{dest});
    }
    .extendLoop(@dest, @selector, @start + @incr, @end, @incr);
}

Ошибок нет, но код вообще ничего не делает. Изменение @{dest} на @dest приводит к ошибке: selector expected less(css-selectorexpected). Передача в селекторе напрямую, например span, работает (но я хочу передать переменную, чтобы сделать ее многократно используемой).

Ожидаемое использование: 

span {
    color: blue;
}
.extendLoop(span, h, 1, 6);
.extend(span, p);

Ожидаемое значение: 

span, h1, h2, h3, h4, h5, h6, p {
    color: blue;
}

Альтернативы (работает, но тратит пространство): 

/*Copies the content to the selectors*/
.copy (@selectors; @content) {
    each(@selectors, {
        @{value} {
            @content();
        }
    })
}

/*Copies the content to a selector in a loop*/
.copyLoop (@selector; @content; @start: 1; @end: 6; @incr: 1) when (@start <= @end) {
    @{selector}@{start} {
        @content();
    }
    .copyLoop(@selector, @content, @start + @incr, @end, @incr);
}

Вывод: 

.copyLoop(h, {color: blue}, 1, 6);
.copy(span, {color: green});
h1 {
  color: blue;
}
.
.
.
h6 {
  color: blue;
}
span {
  color: green;
}

Хотя он работает так же, я бы предпочел использовать расширяющие функции в Для сохранения файлового пространства.

...