less學(xué)習(xí)筆記5-語言特性(import)

本來預(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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末车酣,一起剝皮案震驚了整個濱河市曲稼,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌湖员,老刑警劉巖贫悄,帶你破解...
    沈念sama閱讀 222,183評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異娘摔,居然都是意外死亡窄坦,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,850評論 3 399
  • 文/潘曉璐 我一進店門凳寺,熙熙樓的掌柜王于貴愁眉苦臉地迎上來鸭津,“玉大人,你說我怎么就攤上這事肠缨∧媲鳎” “怎么了?”我有些...
    開封第一講書人閱讀 168,766評論 0 361
  • 文/不壞的土叔 我叫張陵晒奕,是天一觀的道長闻书。 經(jīng)常有香客問我,道長脑慧,這世上最難降的妖魔是什么惠窄? 我笑而不...
    開封第一講書人閱讀 59,854評論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮漾橙,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘楞卡。我一直安慰自己霜运,他們只是感情好脾歇,可當(dāng)我...
    茶點故事閱讀 68,871評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著淘捡,像睡著了一般藕各。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上焦除,一...
    開封第一講書人閱讀 52,457評論 1 311
  • 那天激况,我揣著相機與錄音,去河邊找鬼膘魄。 笑死乌逐,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的创葡。 我是一名探鬼主播浙踢,決...
    沈念sama閱讀 40,999評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼灿渴!你這毒婦竟也來了洛波?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,914評論 0 277
  • 序言:老撾萬榮一對情侶失蹤骚露,失蹤者是張志新(化名)和其女友劉穎蹬挤,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體棘幸,經(jīng)...
    沈念sama閱讀 46,465評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡焰扳,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,543評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了够话。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蓝翰。...
    茶點故事閱讀 40,675評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖女嘲,靈堂內(nèi)的尸體忽然破棺而出畜份,到底是詐尸還是另有隱情,我是刑警寧澤欣尼,帶...
    沈念sama閱讀 36,354評論 5 351
  • 正文 年R本政府宣布爆雹,位于F島的核電站,受9級特大地震影響愕鼓,放射性物質(zhì)發(fā)生泄漏钙态。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,029評論 3 335
  • 文/蒙蒙 一菇晃、第九天 我趴在偏房一處隱蔽的房頂上張望册倒。 院中可真熱鬧,春花似錦磺送、人聲如沸驻子。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,514評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽崇呵。三九已至缤剧,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間域慷,已是汗流浹背荒辕。 一陣腳步聲響...
    開封第一講書人閱讀 33,616評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留犹褒,地道東北人抵窒。 一個月前我還...
    沈念sama閱讀 49,091評論 3 378
  • 正文 我出身青樓,卻偏偏與公主長得像化漆,于是被迫代替她去往敵國和親估脆。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,685評論 2 360

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理座云,服務(wù)發(fā)現(xiàn)疙赠,斷路器,智...
    卡卡羅2017閱讀 134,711評論 18 139
  • 再談CSS 預(yù)處理器2016-09-09 Justineo JavaScript轉(zhuǎn)自:http://efe.bai...
    抓住時間的尾巴吧閱讀 1,579評論 0 2
  • 簡介 CSS(層疊樣式表)是一門歷史悠久的標(biāo)記性語言朦拖,同 HTML 一道圃阳,被廣泛應(yīng)用于萬維網(wǎng)(World Wide...
    老夫的天閱讀 1,946評論 1 29
  • [目錄] Less為什么會出現(xiàn)? 學(xué)習(xí)Less的網(wǎng)站 Less的安裝環(huán)境離線的安裝方式在線的安裝方式 less轉(zhuǎn)化...
    頑皮的雪狐七七閱讀 15,379評論 5 42
  • 先安利我最近看的一部電視劇吧:《雞毛飛上天》璧帝,講浙江義烏小商品市場怎么發(fā)展起來的故事捍岳,以小積大呀,所以我們的基礎(chǔ)一...
    Iris_mao閱讀 598評論 0 6