LESS - Phạm vi

Sự miêu tả

Phạm vi biến chỉ định vị trí của biến khả dụng. Các biến sẽ được tìm kiếm từ phạm vi cục bộ và nếu chúng không có sẵn, thì trình biên dịch sẽ tìm kiếm từ phạm vi mẹ.

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 Scope</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>
   
   <body>
      <h1>Example using Scope</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

@var: @a;
@a: 15px;

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

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