Добавить строку в переменной LESS

Question

Я хочу динамически вызвать .some-mixin() с некоторыми цветами. Этот mixins должен генерировать некоторые стили, а когда цвета равны, должен генерироваться специальный код.

Из-за включения окончательного кода css я хочу сделать это с помощью переменной, где я могу хранить классы для специального кода.

Может быть образец кода будет более полезным:

.some-mixin(@newClass,@color,@color2){ 
     .test-mixin(@newClass,@color,@color2); 
     .@{newClass}{ 
     color: @color; 
     } 
} 

@classes: ''; 
.test-mixin(@newClass,@color,@color2) when (@color = @color2){ 
    @classes: "@{classes}, @{newClass}"; 
} 
.final-mixin(){ 
    .@{classes}{ 
     /*some styles*/ 
    } 
} 

Вызов Mixins генерируется PHP и конечный код должен выглядеть следующим образом:

.some-mixin("abc",#ffffff,#000000); 
.some-mixin("xyz",#ffffff,#ffffff); 
.some-mixin("jkl",#ff00ff,#ff00ff); 
.final-mixin(); 

Но когда я хочу скомпилировать LESS это infinite loop detected

Возможно ли это в МЕНЬШЕ?

Любой совет будет helpul.

Answer 1

Как поясняется в комментариях, ваша проблема заключается в определении рекурсивной переменной в приведенной ниже строке. Меньше не поддерживает это, как объяснено в this answer и this one.

@classes: "@{classes}, @{newClass}"; 

---

Основываясь на ваше требование объяснения в комментариях (что бы некоторые дополнительные обивка и т.д., когда цвета разные), вы можете использовать один из перечисленных ниже способов.

Вариант 1: (добавим отступы к каждому классу и поэтому повторяющийся код)

.some-mixin(@newClass,@color,@color2){ 
     .@{newClass}{ 
     color: @color; 
     & when not (@color = @color2){ 
      padding: 4px; 
     } 
     } 
} 

.some-mixin(abc,#ffffff,#000000); 
.some-mixin(xyz,#ffffff,#ffffff); 
.some-mixin(jkl,#ff00f0,#ff00ff); 

выше Меньше будет компилировать в ниже CSS:

.abc { 
    color: #ffffff; 
    padding: 4px; /* colors were different */ 
} 
.xyz { 
    color: #ffffff; 
} 
.jkl { 
    color: #ff00f0; 
    padding: 4px; /* colors were different */ 
} 

---

Option 2: (использует класс манекена + удлинить и таким образом меньший код)

Этот вариант, вероятно, является тем, что вы ищете, поскольку он избегает повторения кода. Мы не можем использовать mixin, и поэтому мы используем фиктивный класс. Это не должно быть большой проблемой, потому что это просто добавляет одну дополнительную строку для вывода CSS.

.common-padding-diff-color{ /* all styles that are needed when colors are different */ 
    padding: 4px; 
} 
.some-mixin(@newClass,@color,@color2){ 
     .@{newClass}{ 
     color: @color; 
     & when not (@color = @color2){ 
      &:extend(.common-padding-diff-color); 
     } 
     } 
} 

.some-mixin(abc,#ffffff,#000000); 
.some-mixin(xyz,#ffffff,#ffffff); 
.some-mixin(jkl,#ff00f0,#ff00ff); 

Это компилировать в

.common-padding-diff-color, 
.abc, 
.jkl { 
    padding: 4px; /* style applied for all cases where colors are not same */ 
} 
.abc { 
    color: #ffffff; 
} 
.xyz { 
    color: #ffffff; 
} 
.jkl { 
    color: #ff00f0; 
}