LESS - Nhập Chỉ thị

Sự miêu tả

Các @importChỉ thị được sử dụng để nhập các tệp trong mã. Nó trải rộng mã LESS trên các tệp khác nhau và cho phép duy trì cấu trúc của mã một cách dễ dàng. Bạn có thể đặt các câu lệnh @import ở bất kỳ đâu trong mã.

Ví dụ: bạn có thể nhập tệp bằng cách sử dụng @importtừ khóa là @import "file_name.less" .

Phần mở rộng tệp

Bạn có thể sử dụng các câu lệnh @import tùy thuộc vào các phần mở rộng tệp khác nhau, chẳng hạn như -

Nếu bạn đang sử dụng phần mở rộng .css , thì nó sẽ được coi là CSS và câu lệnh @import vẫn như cũ.
Nếu nó chứa bất kỳ phần mở rộng nào khác, thì nó sẽ được coi là ÍT NHẤT và sẽ được nhập.
Nếu không có phần mở rộng LESS, thì phần mở rộng đó sẽ được thêm vào và bao gồm dưới dạng tệp LESS đã nhập.

@import "style";      // imports the style.less
@import "style.less"; // imports the style.less
@import "style.php";  // imports the style.php as a less file
@import "style.css";  // it will kept the statement as it is

Thí dụ

Ví dụ sau minh họa việc sử dụng biến trong tệp SCSS:

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

   <body>
      <h2>Example of Import Directives</h2>
      <p class = "myline">Welcome to Tutorialspoint...</p>
   </body>
</html>

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

import_dir.less

.myline {
   font-size: 20px;
}

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

style.less

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

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

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

.myline {
   font-size: 20px;
}

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