去年也寫過一點關於Less的內容，
其實當時完全不曉得為什麼要寫Less，
現在完全能夠體會沒有使用preprocessor的感覺有點痛苦。

Import

Import可以將別個**.less檔案 import，
然後輸出成同一個css檔案，
並且可以使用所有的變數。

先創建兩個檔案分別是 header.less、footer.less
並且隨便寫點甚麼，

header {
  background-color: #000077;
  font-size: 40px;
  .logo {
    width: 100px;
    height: 50px;
  }
}

footer {
  width: 100%;
  padding: 20px;
}

最後可以import到同一支檔案中：

@import "header.less";
@import "footer";  // 可以不用寫上檔名

可以看到輸出的結果是：

header {
  background-color: #000077;
  font-size: 40px;
}
header .logo {
  width: 100px;
  height: 50px;
}
footer {
  width: 100%;
  padding: 20px;
}

這樣做的好處是利於分工合作，
將來如果要再次使用，也可以直接拿出來。

@import (reference) "**.less"

可以import一個less檔案，內容不會被輸出，
當作library使用。

header {
  background-color: #000077;
  font-size: 40px;
  .logo {
    width: 100px;
    height: 50px;
  }
}
@import (reference) "footer.less";

compile的結果會是

header {
  background-color: #000077;
  font-size: 40px;
}
header .logo {
  width: 100px;
  height: 50px;
}

@import (inline) "**.less"

**.less不會被compile，
直接被引入。

@import "header.less";
@import (inline) "footer.less";

輸出的結果 header是被compile過的，
而footer則還是less的格式。

header {
  background-color: #000077;
  font-size: 40px;
}
header .logo {
  width: 100px;
  height: 50px;
}

// 未被compile的 footer.less被import進來了

footer {
  width: 100%;
  padding: 20px;
  div {
    background-color: #000099;
  }
}

@import (once) "**.less"

這是default，
只會import一次。

@import "header.less";
@import (once) "footer.less"; 
@import (once) "footer.less"; 
@import (once) "footer.less"; 

輸出的結果還是只會有一次，

header {
  background-color: #000077;
  font-size: 40px;
}
header .logo {
  width: 100px;
  height: 50px;
}
footer {
  width: 100%;
  padding: 20px;
}
footer div {
  background-color: #000099;
}

@import (multiple) "**.less"

對比上面，
**.less可以被多次import。

@import "header.less";
@import (multiple) "footer.less"; 
@import (multiple) "footer.less"; 

header {
  background-color: #000077;
  font-size: 40px;
}
header .logo {
  width: 100px;
  height: 50px;
}
footer {
  width: 100%;
  padding: 20px;
}
footer div {
  background-color: #000099;
}
footer {
  width: 100%;
  padding: 20px;
}
footer div {
  background-color: #000099;
}

@import (optional) "**.less"

當**.less不存在時，
可以繼續compile。

@import "header.less";
@import "content.less"; // 這是不存在的檔案
@import "footer.less"; 

存檔後gulp會報錯，告訴我們content.less這個檔案並不存在，
並且其他檔案compile會失敗。

Potentially unhandled rejection [2] 'content.less' wasn't found.

如果改成@import (optional) "content.less";

@import "header.less";
@import (optional) "content.less"; // 這是不存在的檔案
@import (optional) "footer.less"; 

就可以跳過content.less這個不存在的檔案，繼續compile接下來的檔案。
然而footer.less是存在的，所以會被compile，
輸出的結果：

header {
  background-color: #000077;
  font-size: 40px;
}
header .logo {
  width: 100px;
  height: 50px;
}
footer {
  width: 100%;
  padding: 20px;
}
footer div {
  background-color: #000099;
}

@import (less) "**.***"

不管檔名為何，
最後都會被當作Less輸出。

新增一個為content.css的檔案，
然後也隨便用less寫些甚麼東西：

.content {
  font-size: 14px;
  line-height: 14;
  div {
    margin: 0 auto;
  }
}

將這個檔案import

@import (less) "content.css";

compile的結果是

.content {
  font-size: 14px;
  line-height: 14;
}
.content div {
  margin: 0 auto;
}

如果沒有加上(less) ，就會被跳過不compile。

@import (css) "**.***"

不管檔名為何，
最後都會被當作css輸出。

原來import不只單單import一個檔案，
還有其他方便的指令能夠使用。