Less 導(dǎo)入指令

2019-05-13 15:06 更新

描述

Less 中，可以通過 @import 指令來導(dǎo)入外部文件。

@import 偽指令用于在代碼中導(dǎo)入文件。 它將LESS代碼分布在不同的文件上，并允許輕松地維護(hù)代碼的結(jié)構(gòu)。 您可以將 @import 語句放在代碼中的任何位置。


例如，您可以使用 @import 關(guān)鍵字作為 @import“file_name.less"導(dǎo)入文件。


文件擴(kuò)展名

您可以使用 @import 語句，具體取決于不同的文件擴(kuò)展名，例如:

  • 如果您使用 .css 擴(kuò)展名，那么它將被視為CSS和 @import 語句保持不變。

  • 如果它包含任何其他擴(kuò)展名，那么它將被視為LESS并將被導(dǎo)入。

  • 如果沒有較少的擴(kuò)展，那么它將被附加并包含為導(dǎo)入的較少文件。 

@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


例子

下面的例子演示了在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>


接下來，創(chuàng)建文件 import_dir.less 。

import_dir.less

.myline {
 font-size: 20px;
}


接下來，創(chuàng)建文件 style.less 。

style.less

@import "http://m.hgci.cn/less/import_dir.less";
.myline {
  color:#FF0000;
} 

在 style.less 中通過 //m.hgci.cn/less/import_dir.less 導(dǎo)入 import_dir.less 文件

您可以使用以下命令將 style.less 編譯為 style.css : 

lessc style.less style.css


接下來執(zhí)行上面的命令，它將用下面的代碼自動(dòng)創(chuàng)建 style.css 文件:

style.css

.myline {
  font-size: 20px;
}
.myline {
  color: #FF0000;
}


輸出

讓我們執(zhí)行以下步驟，看看上面的代碼如何工作:

  • 將上面的html代碼保存在 import_directives.html 文件中。

  • 在瀏覽器中打開此HTML文件，將顯示如下輸出。


輸出
以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)