Less - подборка Strange Prepros

У меня меньше кода:

colors : 1 #F00, 2 #0F0, 3 #00F, 4 #F0F;

.for(@colors); .-each(@values) {
    @position: extract(@values, 1);
    @color: extract(@values, 2);

    &.raster-@{position} {
        background-image: linear-gradient(#000000, @color);
    }
}

Я использую миксин for из https://github.com/seven-phases-max/less.curious/blob/master/src/for.less

Сгенерированный код:

.bg-1 {
  background-color: #ff0000 !important;
  color: extract(1 #ff0000, 3);
}
.bg-2 {
  background-color: #00ff00 !important;
  color: extract(2 #00ff00, 3);
}
.bg-3 {
  background-color: #0000ff !important;
  color: extract(3 #0000ff, 3);
}
.bg-4 {
  background-color: #ff00ff !important;
  color: extract(4 #ff00ff, 3);
}

Я нашел проблему. Я использую .for() для создания классов .bg-xx.

@bgColors : red red yellow, blue blue white;

.for(@bgColors); .-each(@values) {
    @name: extract(@values, 1);
    @bgColor: extract(@values, 2);
    @color: extract(@values, 3);

    &.bg-@{name} {
        background-color: @bgColor !important;
        color: @color;
    }
}

Что не так с этим кодом?


less prepros
person Lolo    schedule 29.03.2015    source источник
comment
Убедитесь, что вы не запускаете несколько циклов .for в одной и той же области. (В вашем фрагменте похоже, что у вас есть еще один .for.-each, который мешает этому). При необходимости изолируйте эти циклы друг от друга с помощью & {} (см. например), в противном случае все .-each определения одной и той же области действия стекают, таким образом, каждый .for запускает каждый .-each...   -  person seven-phases-max    schedule 29.03.2015
comment
Думаю, я мог бы написать ответ, если бы вы разместили полный пример в своем вопросе (например, показывали оба (или все) цикла внутри этого класса (.bg?)) - чтобы я мог написать модифицированный пример. В противном случае потребуется слишком много времени, чтобы охватить все возможные множественные циклы в одной и той же вариации подводных камней с решением для каждого.   -  person seven-phases-max    schedule 29.03.2015
comment
Ты прав. В другом меньшем файле у меня был этот код для .bg-red, .bg-blue,.... Thanx   -  person Lolo    schedule 29.03.2015
comment
Да, по этой причине особенно следует избегать циклов в глобальной области (поскольку вы никогда не знаете, что другие файлы также могут внести в глобальные). Таким образом, если вы создаете несколько классов, всегда полезно переместить общую часть имени класса из цикла. Например. вот так.   -  person seven-phases-max    schedule 29.03.2015
comment
Также не пропустите шаблон проектирования итерации по списку без цикла.   -  person seven-phases-max    schedule 29.03.2015

Ответы (1)


arrow_upward
2
arrow_downward

Вместо использования «трюков» с if-wrapper (mixin) или миксинами вы также можете рассмотреть возможность использования охранников миксинов для создания циклов, как описано по адресу: http://lesscss.org/features/#loops».-feature

Например:

@bgColors: red red yellow, blue blue white;

.backgrounds(@colors; @iterator: 1) {

    @name: extract(extract(@colors, @iterator), 1);
    @bgColor: extract(extract(@colors, @iterator), 2);
    @color: extract(extract(@colors, @iterator), 3);

    &.bg-@{name} {
        background-color: @bgColor !important;
        color: @color;
    }

   & when (@iterator < length(@colors)) {
     .backgrounds(@colors; @iterator + 1);
   }
}
.backgrounds(@bgColors);

компилируется в следующий код CSS:

.bg-red {
  background-color: red !important;
  color: yellow;
}
.bg-blue {
  background-color: blue !important;
  color: white;
}
person Bass Jobsen    schedule 29.03.2015
comment
Да, я мог бы использовать эту технику цикла, но миксин .for() короткий и понятный. - person Lolo; 30.03.2015