Wiele funkcji wewnątrz łańcucha za pomocą LESS

Question

Po raz pierwszy zapytałem o numer similar question i otrzymałem wspaniałą odpowiedź. Niestety, tym razem odpowiedź nie jest wystarczająca, a pytanie jest nieco bardziej złożone.

Używam LESS z miksami LESSHat do budowy motywu w tej chwili. Jako zmienne zdefiniowałem wiele kolorów i obecnie próbuję zdefiniować gradient za pomocą mixina LESSHata. Problemem jest to, że mixin akceptuje ciąg jako jeden argument, a nie szereg argumentów dla każdego parametru gradientu, na przykład:

#element { 
    .gradient(~"linear-gradient(90deg, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%)"); 
} 

wszystko jest dobrze i dobre z powyższym, i mogę wykorzystać moje zmienne wewnątrz łańcucha za pomocą interpolacji ciągów (np. @{color-var}). Jednak chciałbym również, aby uruchomić niektóre funkcje na zmiennych, coś takiego:

.gradient(~"linear-gradient(top, @{green} 0%, @{green} 50%, darken(@green, 10%) 50%, darken(@green, 10%) 100%)"); 

Problemem jest to, że nigdy nie jest kompilowany darken(@green, 10%), a niektóre przeglądarki po prostu zinterpretować ten kolor jako green. Czy ktoś zna poprawny sposób, aby zawrzeć powrót funkcji darken() wewnątrz powyższego ciągu, bez tworzenia oddzielnej zmiennej dla tego?

Dla porównania, próbowałem następujące bezskutecznie:

.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%)"); 

Answer 1

To powinno działać, jak to jest pierwszym podejściem, ale powinny również zawierać ~:

.gradient(~"linear-gradient(top, @{green} 0%, @{green} 50%, " darken(@green, 10%) ~" 50%, " darken(@green, 10%) ~" 100%)"); 

Answer 2

Czy próbowali zapisaniem przyciemniony kolor do zmiennej w pierwszej kolejności? Tak:

@darkened-green: darken(@green, 10%); 
.gradient(~"linear-gradient(top, @{green} 0%, @{green} 50%, @{darkened-green} 50%, @{darkened-green} 100%)");