LESS - Интерполяция - Использование динамически созданного имени класса AS A MIXIN?

Предположим, вы хотите, чтобы mixin принимал параметр и использовал этот параметр для вызова другого mixin.LESS - Интерполяция - Использование динамически созданного имени класса AS A MIXIN?

.text-right { 
    text-align: right 
} 

.text-center { 
    text-align: center; 
} 

.text-left { 
    text-align: left; 
} 


// mixin to call one of the above selectors 
.text-align(@direction) { 
    [email protected]{direction}; 
} 

body { 
    .text-align(right); 
} 

// Unrecognized input on this line 
// [email protected]{direction};

Попытка этого приведет к нераспознанному вводу на линии, которую вы пытаетесь интерполировать параметр.

Как я могу принять параметр, а затем использовать этот параметр для вызова других подмешать (где имя параметра является частью имени Mixin) ??

источник

2017-01-13 Joshua Soileau

Это кажется невозможным, но обратная возможно: http://codepen.io/mtbottens/pen/rjLJaX #dinklage – bottens

Это зависит. Если ваш пример является абстрактным (а не просто «text-left-right-whatever», который может быть кодирован намного проще), то есть он действительно относится к многократно используемым миксинам, а просто * не * кодирует параметры mixin в именах mixin. Сохраняйте параметры как параметры, и имея в виду, что вся история действительно должна быть написана точно противоположно [например,] (https://gist.github.com/seven-phases-max/3d95a06e3acd89dbc8916d733f00cb3d). –

Говоря о щедрости, в этом нет никакой реальной точки. Ответ прост, как: «Вы не можете». (Следовательно, комментарии, рекомендующие пересмотреть ваш подход, который в какой-то мере испорчен, даже если у Less есть такая функция). –

Вы не можете. Не так. Соответствующая строка в МЕНЬШЕ исходном коде находится в parser.js, mixin.call - анализатор из подмешать вызов:

e = parserInput.$re(/^[#.](?:[\w-]|\\(?:[A-Fa-f0-9]{1,6} ?|[^A-Fa-f0-9]))+/)

То есть, действительный вызов Mixin может быть назван только в качестве действительного CSS .class или #ID идентификатора. Все остальное является неповторимым и даже не доходит до этапа переменной интерполяции.

Если мы расслабляем требования решения, есть способ. Теперь нам нужна функция, которая принимает часть имени класса и вызывает mixin с этим именем класса. Если жить с этим не будучи полностью динамическим, мы можем просто реализовать эту функцию с рядом when пунктов:

.text-align(@direction) when (@direction=left) { 
    .text-left; 
} 
.text-align(@direction) when (@direction=center) { 
    .text-center; 
} 
.text-align(@direction) when (@direction=right) { 
    .text-right; 
}

источник

2017-01-23 17:49:42

Спасибо, это был вывод, к которому я пришел. –

LESS - Интерполяция - Использование динамически созданного имени класса AS A MIXIN?

ответ

Смежные вопросы