LESS - Chỉ thị lồng nhau và tạo bong bóng

Sự miêu tả

Bạn có thể lồng các chỉ thị như media và keyframe theo cùng một cách, giống như cách bạn lồng các bộ chọn. Bạn có thể đặt chỉ thị lên trên và các phần tử tương đối của nó sẽ không bị thay đổi bên trong tập quy tắc của nó. Đây được gọi là quá trình sủi bọt.

Thí dụ

Ví dụ sau minh họa việc sử dụng các chỉ thị lồng nhau và tạo bọt trong tệp LESS -

<html>
   <head>
      <title>Nested Directives</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Nested Directives</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
   </body>
</html>

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

style.less

.myclass {
   @media screen {
      color: blue;
      @media (min-width: 1024px) {
         color: green;
      }
   }
   @media mytext {
      color: black;
   }
}

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

@media screen {
   .myclass {
      color: blue;
   }
}
@media screen and (min-width: 1024px) {
   .myclass {
      color: green;
   }
}
@media mytext {
   .myclass {
      color: black;
   }
}

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