LESS - Mixin Guards

Sự miêu tả

Nếu bạn muốn so khớp các giá trị đơn giản hoặc số đối số trên biểu thức, thì bạn có thể sử dụng các bảo vệ. Nó được liên kết với khai báo mixin và bao gồm điều kiện được đính kèm với một mixin. Mỗi mixin sẽ có một hoặc nhiều bảo vệ được phân tách bằng dấu phẩy; một bảo vệ phải được đặt trong dấu ngoặc đơn. LESS sử dụng các mixin được bảo vệ thay vìif/else và thực hiện các phép tính để chỉ định mixin phù hợp.

Bảng sau mô tả các loại bộ bảo vệ mixin khác nhau cùng với mô tả.

Sr.No.	Loại & Mô tả
1	Toán tử so sánh bảo vệ Bạn có thể sử dụng toán tử so sánh (=) để so sánh số, chuỗi, mã định danh, v.v.
2	Bảo vệ toán tử logic Bạn có thể sử dụng từ khóa và để làm việc với các toán tử logic với bảo vệ.
3	Nhập chức năng kiểm tra Nó chứa các chức năng tích hợp để xác định loại giá trị cho các mixin phù hợp.
4	Mixin có điều kiện LESS sử dụng chức năng mặc định để kết hợp mixin với các kết hợp trộn khác.

Thí dụ

Ví dụ sau minh họa việc sử dụng bộ bảo vệ mixin trong tệp LESS -

<!doctype html>
   <head>
      <title>Mixin Guards</title>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <h2>Example of Mixin Guards</h2>
      <p class = "class1">Hello World...</p>
      <p class = "class2">Welcome to Tutorialspoint...</p>
   </body>
</html>

Bây giờ, tạo tệp style.less .

style.less

.mixin (@a) when (lightness(@a) >= 50%) {
   font-size: 14px;
}

.mixin (@a) when (lightness(@a) < 50%) {
   font-size: 16px;
}

.mixin (@a) {
   color: @a;
}

.class1 {
   .mixin(#FF0000)
}

.class2 {
   .mixin(#555)
}

Bạn có thể biên dịch style.less thành style.css bằng cách sử dụng lệnh sau:

lessc style.less style.css

Thực hiện lệnh trên; nó sẽ tự động tạo tệp style.css với mã sau:

style.css

.class1 {
   font-size: 14px;
   color: #FF0000;
}

.class2 {
   font-size: 16px;
   color: #555;
}

Đầu ra

Làm theo các bước sau để xem cách mã trên hoạt động -

Lưu mã html ở trên trong mixin-guard.html tập tin.
Mở tệp HTML này trong trình duyệt, kết quả sau sẽ được hiển thị.