Less導入選項

Less 提供了CSS @import CSS規則的幾個擴展，以提供更多的靈活性來處理外部文件。

語法： @import (keyword) "filename";

如下是導入指令的相關詳情：

• reference，使用較少的文件但不輸出。
• inline，在輸出中包含源文件，但不對其進行處理。
• less，不管文件擴展名爲何，都將其視爲less文件。
• css，不管文件擴展名爲何，都將其視爲CSS文件。
• once，僅包含一次文件（這是默認行爲）。
• multiple，屢次包含文件。
• optional，找不到文件時繼續編譯。

參考

使用 @import（reference）導入外部文件，但除非被引用，不然不將導入的樣式添加到編譯的輸出中。

reference 根據所使用的方法（混合仍是擴展），會產生不一樣的結果：

• mixin：當reference樣式用做隱式mixin時，它的規則將被混合，標記爲 「not reference」，並照常顯示在被引用的位置。
• extend：擴展選擇器時，僅將新選擇器標記爲未引用，並將其拉入引用 import 語句的位置。

Inline

使用 @import (inline) 包括外部文件，但不能對其進行處理。

Less

使用 @import (less) 治療導入的文件同樣都不能少，不管文件擴展名。

@import (less) "main.css";

CSS

使用 @import (css) 治療導入的文件做爲常規CSS，不管文件擴展名，也就意味着import語句將保持原樣。

@import (css) "main.less";
    
    // 輸出
    @import "main.less";

Once

@import 語句的默認行爲，也就意味着該文件僅導入一次，該文件的後續導入語句將被忽略。

@import (once) "main.less";
    // 此語句將被忽略
    @import (once) "main.less";

Multiple

使用 @import (multiple) 容許使用相同的名稱導入的多個文件，這是一次相反的行爲。

// file: main.less
    div {
      color: green;
    }
    // file: index.less
    @import (multiple) "main.less";
    @import (multiple) "main.less";
    
    // 輸出結果
    div {
      color: green;
    }
    div {
      color: green;
    }

Optional

用於 @import (optional) 僅在文件存在時才容許導入，若是沒有optional關鍵字Less，則在導入找不到的文件時會引起FileError並中止編譯。