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";