LESS CSS guards mà không cần mixin

Question

Tôi chỉ nhận được vào LESS và đang cố gắng tìm ra cách tôi có thể đưa ra các câu lệnh css có điều kiện mà không có mixin. Tôi thấy rằng tôi có rất nhiều câu lệnh css đơn dòng chỉ xuất hiện một lần nhưng phụ thuộc vào một số biến hoặc điều kiện và việc sử dụng mixin là vô nghĩa vì nó sẽ không bao giờ được tái sử dụng.

Ví dụ.

@add-margin: true; 

body { 
    margin-top: 20px; //I only want this if add-margin is true 
} 

Vì vậy, lý tưởng tôi muốn điều này:

body when (@add-margin) { 
    margin-top: 20px; 
} 

Nhưng điều đó không làm việc. Sử dụng một mixin hoạt động nhưng có vẻ ngớ ngẩn để làm cho một chỉ cho một lót. Có cách nào khác để tôi có thể làm điều này không?

Cảm ơn

Answer 1

không, không thể có trong biểu mẫu đó.

bạn có thể sử dụng biến bằng 0 hoặc 1 và nhân với 20 và sau đó luôn xuất ra quy tắc hoặc sử dụng JavaScript (tôi khuyên bạn nên tránh điều này) để chuyển đổi đúng thành 0 hoặc 20 và luôn xuất ra quy tắc nhưng nếu bạn muốn tài sản được bổ sung có điều kiện, bạn cần bảo vệ.

Answer 2

có thể, mã này tương tự như mã của bạn.

@add-margin: true; 

.margin() when (@add-margin) { 
    margin-top: 20px; 
} 

body { .margin(); } 

UPDATE: Sử dụng phiên bản mới nhất của LESS (1.5+), sử dụng "mixins canh gác" không cần thiết để đạt được điều này, và bạn có thể sử dụng "gaurds css" thay vào đó, do đó mã của OP sẽ làm việc ra khỏi hộp

Answer 3

CSS Guards tính năng được giới thiệu trong Ít v1.5.0 và do đó giờ đây chúng tôi có thể sử dụng các vệ sĩ giống như cách được đề cập trong câu hỏi.

@add-margin: true; 

body when (@add-margin){ 
    margin-top: 20px; 
} 

Nếu trong trường hợp, bạn cần phải bổ sung nhiều tài sản đó để selectors khác nhau dựa trên cùng một biến, nó có thể được thực hiện như dưới đây sử dụng bộ chọn &.

& when (@add-margin){ 
    body{ 
     margin-top: 20px; 
    } 
    h1{ 
     margin-top: 10px; 
    } 
} 

Lưu ý: Như đã đề cập bởi memeLab trong ý kiến, bất kỳ giá trị cho @add-margin biến khác hơn true là considered as falsy. Điều này là do true là một từ khóa trong khi 'true' là một giá trị Chuỗi. Ví dụ, dưới đây sẽ không có gì.

@add-margin: 'true'; 

body when (@add-margin){ 
    margin-top: 20px; 
} 

Tuy nhiên, bên dưới sẽ hoạt động vì nó so sánh Chuỗi.

@add-margin: 'true'; 

body when (@add-margin = 'true'){ 
    margin-top: 20px; 
} 

Nếu bạn đang sử dụng trình biên dịch Thấp hơn v1.5.0 thì câu trả lời được đăng bởi Unicornist là đặt cược tốt nhất.