LESS - Đang nhập

Sự miêu tả

Nó được sử dụng để nhập nội dung của các tệp LESS hoặc CSS.

Thí dụ

Ví dụ sau minh họa việc sử dụng nhập trong tệp LESS -

<html>
   <head>
      <title>Less Importing</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>

   <body>
      <h1>Example using Importing</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
      <p class = "myclass1">It allows reusing CSS code and 
      writing LESS code with same semantics.</p>
      <p class = "myclass2">LESS supports creating cleaner, 
      cross-browser friendly CSS faster and easier.</p>
   </body>
</html>

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

myfile.less

.myclass {
   color: #FF8000;
}

.myclass1 {
   color: #5882FA;
}

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

style.less

@import "http://www.tutorialspoint.com/less/myfile.less";
.myclass2 {
   color: #FF0000;
}

Tệp myfile.less sẽ được nhập vào style.less từ đường dẫnhttps://www.tutorialspoint.com/less/myfile.less

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 {
   color: #FF8000;
}

.myclass1 {
   color: #5882FA;
}

.myclass2 {
   color: #FF0000;
}

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