Less從入門到精通——引入（附學習視頻、源碼及筆記）

完整學習視頻及資料在這裏哦~
連接：https://pan.baidu.com/s/1cXs9KKoIFP1M5oTClSr7yg
提取碼：4k8t

引入(importing)

引入less文件

• 咱們能夠引入一個或多個 .less 文件，而後再這個文件中的全部變量均可以在當前 less 文件中使用。
• 語法：@import " ×××" ；裏面爲須要引入less文件的相對路徑，若和當前文件同一目錄，則直接寫被引入文件的名字，如" commont"，如果外一層，則爲"../commont"，依次類推。

// 在同一目錄 建立comment.less 寫入
@font-size:50px;
html {
  font-size: @font-size;
}

// 在咱們的項目文件style.less 中引入並使用
@import "common";
div{
    font-size: @font-size;
}
// 輸出的style.css爲：
html {
  font-size: 50px;
}
div {
  font-size: 50px;
}

引入css文件

• 注意：引入css文件會被原樣輸出到編譯的文件中。
• 格式：@import "×××.css"，一樣爲絕對路徑，不一樣是須要加後綴名，由於默認是 less 因此不能省略。
• 引入的css文件不能進行混合。

// 建立同級目錄下的common.css文件，寫入
.bg{
    background-color: pink;
}
// 引入
@import "common.css";
.div{
    .bg;    		// 報錯 不能進行混合
}
// 刪掉報錯後 輸出的css樣式爲 這樣的再把其引入到html中是能夠生效的 （無限套娃 哈哈哈）
@import "common.css";

咱們通常寫一些公共的 less，來爲各個文件使用。

引入可帶參數

在引入的時候咱們能夠帶參數來實現不一樣的引入效果。

參數	格式	解釋
once	@import (once) "com"	默認，只包含一次
reference	@import (reference) "com"	使用Less文件但不輸出
inline	@import (inline) "文件名（包括後綴）"	在輸出中包含源文件但不加工它,不能使用其變量
less	@import (less) "com"	將文件做爲Less文件對象，不管是什麼文件擴展名
css	@import (css) "com"	將文件做爲CSS文件對象，不管是什麼文件擴展名
multiple	@import (mulitiple) "com"	容許引用屢次相同文件名的文件

注意：

• 引入了的CSS文件不能進行混合；
• reference參數使用後可使用被引入文件的的變量與混合可是被引入的less文件裏定義的類與混合不會再被輸出，這樣就不用一個一個加小括號了，適用於寫通用的less文件來供其餘less文件使用變量和混合;
• 使用inline參數，會直接輸出其中的類與混合，不能在引入文件中使用其中的變量與混合，適合於書寫公共樣式，來直接使用;
• 使用多少次multiple參數引入相同的文件，就會輸出多少次（每引入一次就輸出一次）。

// com.less
@color:pink;
.bg{
    background-color: @color;
}

// 參數使用
// 1 默認 once
@import (once) "com";
//輸出
.bg {
  background-color: pink;
}

// 2 reference
@import (reference) "com";
div{
    color: @color;
}
// 輸出
div {
  color: pink;
}
.bg {
  background-color: pink;
}

// 3 inline
@import (inline) "commont.css";
@import (inline) "commont.less";
// 輸出
@color:pink;  					// 報錯 由於使直接輸出 在css中不能這樣定義 因此報錯
.bg{
    background-color: @color;                  // 報錯
}
// 因此 使用inline參數引入less文件時 須要注意

// 4 less
@import (less) "com";
// 輸出
.bg {
  background-color: pink;
}

// 5 css
@import (css) "com";
.div{
    .bg;    		// 報錯 不能進行混合
}

// 6 multiple
@import (multiple) "com.css";
@import (multiple) "com.css";
// 輸出
@import "com.css";
@import "com.css";