LESS - Bảo vệ CSS

Sự miêu tả

Bảo vệ được sử dụng để so khớp các giá trị đơn giản hoặc một số đối số trên biểu thức. Nó được áp dụng cho các bộ chọn CSS. Nó là cú pháp để khai báo mixin và gọi nó ngay lập tức. Để đưa ra thành côngifcâu lệnh kiểu; tham gia điều này với tính năng&, cho phép bạn nhóm nhiều bảo vệ.

Thí dụ

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

css_guard.htm

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

   <body>
      <div class = "cont">
         <h2>Welcome to TutorialsPoint</h2>
      </div>
		
      <div class = "style">
         <h3>The largest Tutorials Library on the web.</h3>
      </div>
   </body>
</html>

Tiếp theo, tạo tệp style.less .

style.less

@usedScope: global;
.mixin() {
   @usedScope: mixin;
   .cont when (@usedScope = global) {
      background-color: red;
      color: black;
   }
   
   .style when (@usedScope = mixin) {
      background-color: blue;
      color: white;
   }
   @usedScope: mixin;
}
.mixin();

Bạn có thể biên dịch tệp 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

.style {
   background-color: blue;
   color: white;
}

Đầ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 css_guard.htm tập tin.
Mở tệp HTML này trong trình duyệt, kết quả sau sẽ được hiển thị.