Nhiều chức năng bên trong chuỗi với LESS

Question

Tôi đã hỏi similar question về điều này một thời gian trước đây và nhận được câu trả lời tuyệt vời. Thật không may, thời gian này vòng câu trả lời là không đủ, và câu hỏi là hơi phức tạp hơn.

Tôi đang sử dụng LESS với các hỗn hợp LESSHat để tạo chủ đề tại thời điểm này. Tôi đã xác định một số màu là biến và hiện đang cố gắng xác định độ dốc bằng cách sử dụng mixin .gradient() của LESSHat. Vấn đề là các mixin chấp nhận một chuỗi như là một đối số duy nhất, chứ không phải là một loạt các đối số cho mỗi tham số gradient, ví dụ:

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

Tất cả là tốt và tốt với ở trên, và tôi có thể sử dụng các biến của tôi bên trong chuỗi bằng cách sử dụng nội suy chuỗi (ví dụ: @{color-var}). Tuy nhiên, tôi cũng muốn chạy một số chức năng trên các biến, một cái gì đó như thế này:

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

Vấn đề là darken(@green, 10%) không bao giờ được biên soạn, và một số trình duyệt đơn giản giải thích màu này như green. Có ai biết cách chính xác để bao gồm sự trở lại của các chức năng darken() bên trong chuỗi ở trên, mà không tạo ra một biến riêng biệt cho điều đó?

Để tham khảo, tôi đã thử các sau đây để avail không có:

.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

này nên làm việc, nó giống như cách tiếp cận đầu tiên của bạn, nhưng bạn cũng nên bao gồm các ~:

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

Answer 2

Các bạn đã thử lưu màu tối vào một biến đầu tiên? Như thế này:

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