本來預(yù)計昨天就可以完成這篇的,由于工作原因,拖到了現(xiàn)在弊知。接下來的一個月應(yīng)該會很忙,工作上有新的項目要開始做粱快,盡可能的會在下班后抽時間繼續(xù)學(xué)習(xí)less的秩彤,不過可能更新的沒有現(xiàn)在這么頻繁了,不過馬上就是周末了事哭,爭取在周末再出一篇漫雷,周末那篇出了后,語言特性這部分就剩一兩篇了鳍咱,下面就是less函數(shù)部分了降盹,函數(shù)部分原文閱讀起來不會很難,打算放在一篇里面全部寫進去谤辜。
import(導(dǎo)入)
import準(zhǔn)則
將其他樣式表中的樣式導(dǎo)入進當(dāng)前樣式表
在標(biāo)準(zhǔn)css中蓄坏,@import聲明必須放在其他類型的聲明之上,也就是放在頂部丑念。但是在less中剑辫,@import聲明可以放在任何地方。
.foo{
background: #900;
}
@import "this-is-valid.less";
文件后綴名
在less中渠欺,@import聲明會根據(jù)引入的文件的后綴進行相應(yīng)的解析。
- 如果文件是.css的后綴椎眯,該文件將會被解析成css樣式挠将,然后@import語句會保持原樣。
- 如果文件是其他類型的后綴的話编整,文件會被解析成less文件舔稀,然后進行導(dǎo)入。
- 如果文件沒有任何后綴掌测,將會為文件添加.less的后綴内贮,并且當(dāng)成less文件進行導(dǎo)入。
@import "foo";//會被當(dāng)成foo.less導(dǎo)入
@import "foo.less";//導(dǎo)入foo.less
@import "foo.php";//會被當(dāng)成foo.less導(dǎo)入
@import "foo.css";//導(dǎo)入foo.css
使用下面所講的參數(shù)可以用來復(fù)寫這個行為
import options
less提供了數(shù)種后綴給css的@import語句,可以更加靈活的去使用外部文件夜郁。
語法:@import(keyword)"filename";
下面是已經(jīng)實現(xiàn)了的import準(zhǔn)則:
- reference:使用less文件到時不將其輸出什燕。
- inline:將源文件包含進來但是不進行處理。
- less:無論文件后綴是什么類型竞端,都當(dāng)成less格式的文件屎即。
- css:無論文件后綴是什么類型,都當(dāng)成css格式的文件事富。
- once:只引入文件一次(為默認(rèn)行為)技俐。
- multiple:引入文件數(shù)次。
- optional:當(dāng)文件沒找到時會繼續(xù)編譯统台。
@import語句允許多個keyword雕擂,你需要用逗號將這些keyword進行分隔:
@import (optional, reference) "foo.less";
reference
使用@import (reference) 導(dǎo)入外部文件,導(dǎo)入的樣式不會添加到編譯輸出贱勃,除非該樣式被引用井赌。
發(fā)布于v1.5.0
@import (reference) "foo.less";
可以想象一下在導(dǎo)入的文件中,reference會使所有的指令和選擇器都會被標(biāo)記上一個引用標(biāo)記募寨,導(dǎo)入時是正常的族展,但是生成css的時候,被標(biāo)記的選擇器不會輸出到css上拔鹰,被標(biāo)記的樣式不會在你生成的css中出現(xiàn)仪缸,直到被標(biāo)記的樣式被當(dāng)成mixins或者extend使用的時候。
此外列肢,reference會生成不同的結(jié)果恰画,取決于哪個方法被調(diào)用(mixin或者extend):
- extend:當(dāng)一個選擇器被繼承的時候,只有新的選擇器會被被標(biāo)記成"非reference"瓷马,它會被放置在引用@import語句的位置拴还。
- mixins:當(dāng)一個被標(biāo)記的樣式被當(dāng)成一個隱式的mixin時,樣式會被混入并且標(biāo)記為"非reference"欧聘,然后被放置在引用這個樣式的地方片林。
你可以通過做一些像下面一樣的事情來將某些指定的樣式從一個樣式庫(像bootstrap )中加進來:
.navbar:extend(.navbar all){ }
你只會將.navbar相關(guān)的樣式從bootstrap中引用進來。
inline
使用@import(inline)引用外部文件怀骤,但是不處理它們费封。
發(fā)布于v1.5.0
@import (inline) "not-less-compatible.css";
當(dāng)一個css文件可能無法被less所兼容時,你可以使用這個特性蒋伦。盡管less支持大部分的標(biāo)準(zhǔn)css弓摘,但是它不支持在某些地方的comments和所有沒有修改css的css hacks。
所以你可以使用這個特性將文件包含進輸出中痕届,因此所有的css都會在一個文件中韧献。
less
使用@import (less)將會把導(dǎo)入文件解析成less格式末患,無論文件是什么格式。
發(fā)布于v1.4.0
@import (less) "foo.css";
css
使用@import(css)將會把文件解析成常規(guī)的css文件锤窑,無論文件是什么格式璧针。這意味著import語句會保持原樣。
發(fā)布于v1.4.0
@import (css) "foo.less";
編譯為:
@import "foo.less";
once
@import語句的默認(rèn)行為果复,意味著文件只會被導(dǎo)入一次陈莽,后續(xù)的導(dǎo)入相同文件的語句會被忽略。
發(fā)布于v1.4.0
@import (once) "foo.less";
@import (once) "foo.less";//該語句會被忽略
multiple
使用@import(multiple)會允許導(dǎo)入多個相同名字的文件虽抄,這行為跟once截然相反走搁。
發(fā)布于v1.4.0
//在文件foo.less中
.a{
color: green;
}
//在文件main.less
@import (multiple) "foo.less";
@import (multiple) "foo.less";
編譯為:
.a{
color: green;
}
.a{
color: green;
}
optional
使用@import(optional)只會導(dǎo)入存在的文件。當(dāng)導(dǎo)入一個找不到的文件時迈窟,如果沒有optional的參數(shù)私植,less將會拋出一個fileerror的錯誤然后停止編譯。
發(fā)布于v2.3.0