LESS - Không gian tên và Trình truy cập

Sự miêu tả

Không gian tên được sử dụng để nhóm các mixin dưới một tên chung. Sử dụng không gian tên, bạn có thể tránh xung đột về tên và gói gọn một nhóm hỗn hợp từ bên ngoài.

Thí dụ

Ví dụ sau minh họa việc sử dụng không gian tên và trình truy cập trong tệp LESS -

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

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

style.less

.class1 {
   .class2 {
      .val(@param) {
         font-size: @param;
         color:green;
      }
   }
}

.myclass {
   .class1 > .class2 > .val(20px);
}

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

.myclass {
   font-size: 20px;
   color: green;
}

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