Как передать список, разделенный запятой, в mixin как один аргумент

Question

Я сделал многоступенчатый градиентный микс, который просто помещает @arguments для всех префиксов поставщиков для *-linear-gradient. Он работает, поставил я раздражен, когда я определяю градиент со многими остановками, я должен поставить все на одной линии при использовании подмешать, как это:

.gradientMultiple(~'top, rgba(255, 255, 255, 1) 0%, rgba(254, 254, 254, 1) 16%, rgba(252, 252, 252, 1) 36%, rgba(239, 239, 239, 1) 66%, rgba(18, 34, 106, 1) 66%, rgba(13, 31, 136, 1) 84%'); 

Я хотел бы поставить функцию параметр на нескольких строках, как это для удобства чтения, но он генерирует синтаксическую ошибку:

.gradientMultiple(~'top, 
    rgba(255, 255, 255, 1) 0%, 
    rgba(254, 254, 254, 1) 16%, 
    rgba(252, 252, 252, 1) 36%, 
    rgba(239, 239, 239, 1) 66%, 
    rgba(18, 34, 106, 1) 66%, 
    rgba(13, 31, 136, 1) 84% 
'); 

Вот определение Mixin:

.gradientMultiple (...) { 
     background-image: -webkit-linear-gradient(@arguments); 
     background-image: -moz-linear-gradient(@arguments); 
     background-image: -ms-linear-gradient(@arguments); 
     background-image: -o-linear-gradient(@arguments); 
     background-image: linear-gradient(@arguments); 
    } 

Answer 1

.gradientMultiple(top, 
    rgba(255, 255, 255, 1) 0%, 
    rgba(254, 254, 254, 1) 16%, 
    rgba(252, 252, 252, 1) 36%, 
    rgba(239, 239, 239, 1) 66%, 
    rgba(18, 34, 106, 1) 66%, 
    rgba(13, 31, 136, 1) 84%;); 

Также см:

• 0
• 1
• 2
• и, наконец, привести замечание 3

Answer 2

Для use cases когда Смешение заставляет вас поставить строку, или вы делаете не хотите МЕНЬШЕ вычислять значение аргумента, вы можете использовать бит javascript:

(отказ от ответственности: оценка JS теперь устарела и, возможно, будет удалена в LESS 3/4, поэтому используйте это только при работе с наследием код, где нет другой альтернативы)

.keyframes(~` 
    "translate, " + 
    "50% { transform: translateX(calc(50% - 25px)) } " + 
    "100% { transform: translateX(0px) } " 
`);