Trình xử lý trước CSS LESS: Có cách nào để ánh xạ một màu duy nhất với định nghĩa rgb và rgba không?

Question

Tôi đang cố gắng để viết một khối trong CSS Preprocessor LESS rằng sẽ làm như sau:

@transparent_background(@color; @alpha: .8) 
{ 
    background: @color; 
    background: rgba(<color R value>, <color G value>, <color B value>, @alpha); 
} 

Có cách nào để có được các giá trị RGB ra khỏi @color nếu đó là một định nghĩa hex tiêu chuẩn (ví dụ # rrggbb)? Có cách nào để làm điều này nếu @color được định nghĩa một số cách khác?

EDIT: GIẢI PHÁP

@transparent_background(@color; @alpha: .8) 
{ 
    background: @color; 
    background: @color + rgba(0, 0, 0, @alpha); 
} 

Answer 1

Không ai trong số các giải pháp có tác dụng nữa, nhưng điều này không (nhờ @Elyse):

.alpha(@color, @alpha: 0.8) { 
    color: @color; 
    color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha); 
} 

Chức năng hsla(), trong khi không được quảng cáo trên trang web LESS, được định nghĩa in the source code.

Answer 2

Hãy thử điều này:

background: @color - rgba(0, 0, 0, 1.0) + rgba(0, 0, 0, @alpha); 

Các phép trừ sẽ xóa kênh alpha trên @color sau đó bạn chỉ cần thêm mong muốn @alpha với kênh alpha. Màu sắc có bộ đầy đủ các toán tử và chúng hoạt động thành phần theo thành phần khi hoạt động trên hai màu; màu sắc được lưu trữ dưới dạng các thành phần RGBA bên trong để nó hoạt động. Ngoài ra, kênh alpha được chuẩn hóa trong khoảng thời gian [0, 1.0] để trừ đi 1,0 khỏi kênh alpha phải xóa kênh alpha mà không gây ra bất kỳ sự cố nào.

Tôi chưa thiết lập CSS LESS ngay bây giờ nên tôi không thể kiểm tra nhưng điều này đáng để chụp.

Answer 3

Lưu ý rằng bạn cũng có thể tiến hành với các chức năng fadeIn/fadeout của LESS:

.alpha(@color, @alpha: 80) 
{ 
    background-color: fadeout(@color, (100 - @alpha)); 
} 

Như vậy, .alpha (đỏ, 25) sẽ cho kết quả trong một background-color của rgba (255, 0, 0, 0.25)

Answer 4

Tôi biết đây là câu hỏi cũ, nhưng nếu tất cả những gì bạn muốn làm là thêm giá trị alpha chỉ cần sử dụng fade(@color, @alpha). Màu sắc có thể là hex, rgba hoặc hsla.