LESS CSS - Thay đổi giá trị biến cho màu chủ đề tùy thuộc vào loại cơ thể

Question

Bắt hiểu thấu với LESS ở đây nhưng một điều vẫn còn chưa rõ ràng.

Cho phép nói rằng tôi có nhiều chủ đề màu cho trang web của mình, được kiểm soát bởi một lớp trên thẻ nội dung. Từ đây tôi có thể xác định lại các màu sắc khác nhau cho từng phần tử trong mỗi chủ đề. Đủ dễ dàng nhưng khá tốn thời gian nếu tôi có nhiều yếu tố để thay đổi ... và rất nhiều chủ đề. Mỗi khi tôi thêm một chủ đề mới, tôi cần phải viết lại tất cả các bộ chọn, với các giá trị màu khác nhau.

Tôi dựa làm việc cho đến nay trên một bài tôi thấy tôi: LESS.css variable depending on class

... Tuy nhiên nó vẫn có vẻ quá phức tạp cho những gì tôi muốn làm ở chỗ tôi vẫn phải viết ra tất cả các selectors và bao gồm mixin trước khi thả vào cùng một CSS với biến màu.

tôi đã tạo ra một CODEPEN HERE

Tôi đánh giá cao nó nếu có ai có thời gian để có một cái nhìn ít và tư vấn cho tôi làm thế nào tôi có thể tiếp cận này khác nhau hoặc làm thế nào tôi có thể sắp xếp quá trình này.

Rất cám ơn cho bất cứ ai giúp ra :)

Answer 1

Giả sử bạn ở lại với mong muốn chủ đề đó trong vòng một style sheet (và không nhiều sheet như cimmanon lưu ý trong các ý kiến), và giả sử bạn đang sử dụng LESS 1.3. 2+, sau đó mã sau hoạt động để giảm số lượng trùng lặp bằng cách thiết lập vòng lặp thông qua các lớp cần thay đổi chủ đề. Lưu ý rằng điều này không hoạt động trên Codepen (nó đang ném một lỗi uncaught throw #, có lẽ vì chúng đang chạy phiên bản cũ hơn của LESS), nhưng bạn có thể thấy nó biên dịch chính xác bằng cách đặt mã vào LESS's compiler.

ÍT (dựa ra mã Codepen của bạn với chủ đề gia tăng đối với bản demo)

////////////////////////////////////////////////////// 
// CONSTANTS 

@lightColour: #fff; 
@darkColour: #000; 
@lightBg: #fff; 
@darkBg: #000; 
@numberOfThemes: 3; //controls theme loop 

////////////////////////////////////////////////////// 
// MIXINS 

//Theme Definitions by parametric mixin numbers (1), (2), etc. 
.themeDefs(1) { 
    @lightColour: #f00; 
    @darkColour: #fff; 
    @lightBg: #f00; 
    @darkBg: #fff; 
} 

.themeDefs(2) { 
    //inverse of 1 
    @lightColour: #fff; 
    @darkColour: #f00; 
    @lightBg: #fff; 
    @darkBg: #f00; 
} 

.themeDefs(3) { 
    @lightColour: #cfc; 
    @darkColour: #363; 
    @lightBg: #cfc; 
    @darkBg: #363; 
} 


.curvy { 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
} 

////////////////////////////////////////////////////// 
// GENERAL STYLING 

* {padding: 0;margin: 0;} 
html {text-align: center;} 
h2 {padding: 20px 0;} 

.box { 
    .curvy; 
    color: @lightColour; 
    background: @darkBg; 
    display:inline-block; width:10%; padding:20px 5%; margin:0 1% 20px 1%; 
} 

////////////////////////////////////////////////////// 
// THEME BUILDING 

.buildThemes(@index) when (@index < @numberOfThemes + 1) { 

    .theme-@{index} { 
     .themeDefs(@index); 
     color: @lightColour; 
     background: @darkBg; 

     .box { 
     color: @darkColour; 
     background: @lightBg; 
     } 
    } 
    .buildThemes(@index + 1); 
} 
//stop loop 
.buildThemes(@index) {} 
//start theme building loop 
.buildThemes(1); 

CSS Output (chỉ hiển thị các chủ đề css lặp cho ngắn gọn)

.theme-1 { 
    color: #ff0000; 
    background: #ffffff; 
} 
.theme-1 .box { 
    color: #ffffff; 
    background: #ff0000; 
} 
.theme-2 { 
    color: #ffffff; 
    background: #ff0000; 
} 
.theme-2 .box { 
    color: #ff0000; 
    background: #ffffff; 
} 
.theme-3 { 
    color: #ccffcc; 
    background: #336633; 
} 
.theme-3 .box { 
    color: #336633; 
    background: #ccffcc; 
}