iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 14
3

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

Import

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

先創建兩個檔案分別是 header.lessfooter.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一個檔案,
還有其他方便的指令能夠使用。


上一篇
[13] Gulp - 撰寫Task
下一篇
[15] Less -Variable
系列文
我在繡房繡小主常服的日子-- 初入前端工程師的第一個小挑戰30

1 則留言

0
cythilya
iT邦新手 4 級 ‧ 2018-10-14 21:39:15

/images/emoticon/emoticon66.gif

/images/emoticon/emoticon63.gif

我要留言

立即登入留言