Làm thế nào để chuyển đổi màu HEX sang rgba bằng trình biên dịch Ít hơn?

Question

Tôi có đoạn mã sau:

@color : #d14836; 

.stripes span { 
-webkit-background-size: 30px 30px; 
-moz-background-size: 30px 30px; 
background-size: 30px 30px; 
background-image: -webkit-gradient(linear, left top, right bottom, 
        color-stop(.25, rgba(209, 72, 54, 1)), color-stop(.25, transparent), 
        color-stop(.5, transparent), color-stop(.5, rgba(209, 72, 54, 1)), 
        color-stop(.75, rgba(209, 72, 54, 1)), color-stop(.75, transparent), 
        to(transparent)); 

tôi cần phải chuyển đổi @color-rgba(209, 72, 54, 1).

Vì vậy, tôi cần phải thay thế rgba(209, 72, 54, 1) trong mã của tôi bằng chức năng Ít tạo ra giá trị rgba() từ biến số @color của tôi.

Làm cách nào tôi có thể thực hiện việc này với Ít hơn?

Answer 1

Nếu bạn không cần khóa alpha, bạn có thể chỉ cần sử dụng biểu diễn hex của màu. Màu rgba với alpha là '1' cũng giống như giá trị hex. Dưới đây là một số ví dụ để chứng minh rằng:

@baseColor: #d14836; 

html { 
    color: @baseColor; 
    //color:#d14836; 
} 

body { 
    color: rgba(red(@baseColor), green(@baseColor), blue(@baseColor), 1); 
    //color:#d14836; 
} 

div { 
    color: rgba(red(@baseColor), green(@baseColor), blue(@baseColor), 0.5); 
    //rgba(209, 72, 54, 0.5); 
} 

span { 
    color: fade(@baseColor, 50%); 
    //rgba(209, 72, 54, 0.5); 
} 

h3 { 
    color: fade(@baseColor, 100%) 
    //color:#d14836; 
} 

Kiểm tra mã này trực tuyến: http://lesstester.com/

Answer 2

ít mixin của tôi:

.background-opacity(@color, @opacity) { 
    @rgba-color: rgba(red(@color), green(@color), blue(@color), @opacity); 

    background-color: @rgba-color; 

    // Hack for IE8: 
    background: none\9; // Only IE8 
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d')", argb(@rgba-color),argb(@rgba-color))); // IE9 and down 
    // Problem: Filter gets applied twice in IE9. 
    // Solution: 
    &:not([dummy]) { 
     filter: progid:DXImageTransform.Microsoft.gradient(enabled='false'); // Only IE9 
    } 
} 

Hãy thử nó.

CHỈNH SỬA: Như đã thấy trên rgba background with IE filter alternative: IE9 renders both! Tôi đã thêm một số dòng vào danh sách kết hợp.

Answer 3

Thực ra, ngôn ngữ LESS đi kèm với hàm được nhúng có tên là fade. Bạn chuyển một đối tượng màu và độ mờ tuyệt đối% (giá trị cao hơn nghĩa là ít minh bạch hơn):

fade(@color, 50%); // return @color with 50% opacity in rgba