Less的@import指令

Less的@import指令

Less中，能夠經過 @import指令來導入外部文件。@import指令能夠放在代碼中的任何位置，導入文件時的處理方式取決於文件的擴展名：

• 若是擴展名是 .css，文件內容將被原樣輸出。
• 若是是任何其餘擴展名，將做爲LESS文件被導入。
• 若是沒有擴展名，將給他添加一個 .less 的擴展名，並做爲LESS文件被導入。

例如：

1. @import "style";      // 導入 style.less
2. @import "style.less";  // 導入style.less
3. @import "style.php";   //  style.php 做爲LESS文件被導入
4. @import "style.css";   // 文件內容被原樣輸出

一個網站經常是有多個模塊組成，若是隻使用一個 .less 文件，編輯起來很是不便，也不利於分工協做。此時，就能夠爲每一個模塊單首創建 .less 文件，而後經過 @import指令將它們合併成一個文件。

假如一個網站包含產品、新聞、BBS三個模塊，就能夠爲每一個模塊單首創建一個 .less 文件，分別是 product.less、news.less、bbs.less。而後，在 style.less 中，經過 @import指令將它們合併成一個文件：

1. @import "product.less";
2. @import "news.less";
3. @import "bbs.less";

導入外部文件的一個常見應用場景，就是變量共享。一般是在一個 .less 文件中定義一些變量，其餘文件只需導入這個 .less 文件，就可使用這些變量。如，在 base.less 中定義 @color 變量：

1. @color: #fff;

而後，在 styles.less 文件中，只需使用 @import指令導入base.less 文件，就可使用它的變量 @color，而沒必要重複定義。代碼以下：

1. @import "base.less";
2. .myclass {
3.   background-color: @color;
4. }

styles.less 編譯後的CSS代碼爲：

1. .myclass {
2.   background-color: #fff;
3. }

另外，爲了在將Less文件編譯生成CSS文件時，提升對外部文件的操做靈活性，還爲@import指令提供了一些配置項。語法爲：

1. @import (keyword) "filename";

@import指令的配置項及其含義見表 2‑1。

表 2‑1  @import指令的配置項及含義

選項	含義
reference	使用文件，但不會輸出其內容（即，文件做爲樣式庫使用）
inline	對文件的內容不做任何處理，直接輸出
less	不管文件的擴展名是什麼，都將做爲LESS文件被輸出
css	不管文件的擴展名是什麼，都將做爲CSS文件被輸出
once	文件僅被導入一次 （這也是默認行爲）
multiple	文件能夠被導入屢次
optional	當文件不存在時，繼續編譯（即，該文件是可選的）

一個@import指令可使用一個或多個配置項，當使用多個配置項時，各配置項之間用逗號隔開。如：

1. @import (optional, reference) "foo.less";