Viết CSS động với Jade

Question

Tôi đang cố gắng để viết ra một số CSS động sử dụng Jade, như vậy:

style(type='text/css') 
    each item in colors 
     .#{item.class} { background-color : #{item.background}; color: #{item.foreground}; } 

Tuy nhiên điều này mang lại các lỗi sau:

ReferenceError: media='print') 
    7| style(type='text/css') 
    > 8|  - for(var item in colors) 
    9|   .#{item.class} { background-color : #{item.background}; color: #{item.foreground}; } 
    10| block Content 
    11|  include scheduleTemplate 

item is not defined 

Nếu tôi loại bỏ các phong cách thẻ, nó làm cho tốt. Có cách nào để sử dụng lặp lại trong một khối kiểu?

Answer 1

Vì thẻ style chỉ cho phép văn bản bằng Jade, nó xử lý văn bản thuần túy của bạn each item in colors. Sau đó, nó gặp #{item.class} và cố gắng phân tích cú pháp đó, nhưng nó không thành công vì nó không xác định item trên dòng trước đó.

Thật không may, tôi không chắc chắn rằng có một cách hay để làm điều này trong Jade. Bạn chỉ có thể phải xác định tất cả css của bạn trước thời hạn trong JS và sau đó chèn nó như vậy:

style(type='text/css') 
    #{predefined_css} 

Vào thời điểm đó, mặc dù nó có thể đơn giản chỉ cần di chuyển các phong cách với một kiểu dáng bên ngoài mà được tạo ra cho mỗi người dùng và sau đó phân phối nó với một số tiêu đề bộ nhớ đệm hợp lý. Điều đó sẽ tránh được những khó khăn khi cố gắng làm cho Jade làm CSS động và tăng tốc tải trang tiếp theo cho người dùng của bạn.

Answer 2

Bạn có thể sử dụng Bút cảm ứng. Nó được tạo ra bởi cùng một người tạo ra Jade và gần như giống hệt với Jade trong lý do.

Answer 3

Tôi đã gặp sự cố tương tự khi tôi muốn thêm một lớp cụ thể vào thẻ body tùy thuộc vào tuyến đường, tương tự như những gì tôi đã thực hiện trong PHP. Cuối cùng, tôi đã sử dụng mẫu thừa kế của ngọc để đạt được kết quả tương tự.

Answer 4

Một cách khác là nhập biểu định kiểu CSS của riêng bạn. Trong Jade doc, bạn có thể thấy rằng bạn có thể bao gồm một style sheet với mã ví dụ:

html 
    head 
    style 
     include style.css 

Sau đó, bạn có thể xác định bất kỳ CSS trong một file riêng biệt mà bạn có thể tham khảo.