Я спросил об этом аналогичном вопросе, и получил отличный ответ. К сожалению, на этот раз ответа не достаточно, и вопрос немного сложнее.
Я использую LESS с LESSHat mixins для создания темы на данный момент. Я определил несколько цветов в качестве переменных, и в настоящее время я пытаюсь определить градиент, используя LESSHat .gradient() mixin. Проблема в том, что mixin принимает строку как один аргумент, а не ряд аргументов для каждого параметра градиента, например:
#element {
.gradient(~"linear-gradient(90deg, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%)");
}
Все хорошо и хорошо с приведенным выше, и я могу использовать мои переменные внутри строки, используя String Interpolation (т.е. @{color-var}). Тем не менее, я также хотел бы запустить некоторые функции для переменных, что-то вроде этого:
.gradient(~"linear-gradient(top, @{green} 0%, @{green} 50%, darken(@green, 10%) 50%, darken(@green, 10%) 100%)");
Проблема в том, что darken(@green, 10%) никогда не компилируется, и некоторые браузеры просто интерпретируют этот цвет как green. Кто-нибудь знает правильный способ включить возвращение функции darken() внутри строки выше, не создавая для этого отдельную переменную?
Для справки я пробовал следующее безрезультатно:
.gradient(~"linear-gradient(top, @{green} 0%, @{green} 50%, "darken(@green, 10%)" 50%, "darken(@green, 10%)" 100%)");
.gradient(~"linear-gradient(top, @{green} 0%, @{green} 50%, {darken(@{green}, 10%)} 50%, {darken(@{green}, 10%)} 100%)");