less學習筆記5-語言特性(import)

本來預計昨天就可以完成這篇的,由于工作原因,拖到了現在。接下來的一個月應該會很忙,工作上有新的項目要開始做,盡可能的會在下班后抽時間繼續學習less的,不過可能更新的沒有現在這么頻繁了,不過馬上就是周末了,爭取在周末再出一篇,周末那篇出了后,語言特性這部分就剩一兩篇了,下面就是less函數部分了,函數部分原文閱讀起來不會很難,打算放在一篇里面全部寫進去。


import(導入)

import準則

將其他樣式表中的樣式導入進當前樣式表

在標準css中,@import聲明必須放在其他類型的聲明之上,也就是放在頂部。但是在less中,@import聲明可以放在任何地方。

.foo{
    background: #900;
}
@import "this-is-valid.less";

文件后綴名

在less中,@import聲明會根據引入的文件的后綴進行相應的解析。

  • 如果文件是.css的后綴,該文件將會被解析成css樣式,然后@import語句會保持原樣。
  • 如果文件是其他類型的后綴的話,文件會被解析成less文件,然后進行導入。
  • 如果文件沒有任何后綴,將會為文件添加.less的后綴,并且當成less文件進行導入。
@import "foo";//會被當成foo.less導入
@import "foo.less";//導入foo.less
@import "foo.php";//會被當成foo.less導入
@import "foo.css";//導入foo.css

使用下面所講的參數可以用來復寫這個行為

import options

less提供了數種后綴給css的@import語句,可以更加靈活的去使用外部文件。

語法:@import(keyword)"filename";
下面是已經實現了的import準則:

  • reference:使用less文件到時不將其輸出。
  • inline:將源文件包含進來但是不進行處理。
  • less:無論文件后綴是什么類型,都當成less格式的文件。
  • css:無論文件后綴是什么類型,都當成css格式的文件。
  • once:只引入文件一次(為默認行為)。
  • multiple:引入文件數次。
  • optional:當文件沒找到時會繼續編譯。

@import語句允許多個keyword,你需要用逗號將這些keyword進行分隔:

@import (optional, reference) "foo.less";

reference

使用@import (reference) 導入外部文件,導入的樣式不會添加到編譯輸出,除非該樣式被引用。

發布于v1.5.0

@import (reference) "foo.less";

可以想象一下在導入的文件中,reference會使所有的指令和選擇器都會被標記上一個引用標記,導入時是正常的,但是生成css的時候,被標記的選擇器不會輸出到css上,被標記的樣式不會在你生成的css中出現,直到被標記的樣式被當成mixins或者extend使用的時候。
此外,reference會生成不同的結果,取決于哪個方法被調用(mixin或者extend):

  • extend:當一個選擇器被繼承的時候,只有新的選擇器會被被標記成"非reference",它會被放置在引用@import語句的位置。
  • mixins:當一個被標記的樣式被當成一個隱式的mixin時,樣式會被混入并且標記為"非reference",然后被放置在引用這個樣式的地方。
    你可以通過做一些像下面一樣的事情來將某些指定的樣式從一個樣式庫(像bootstrap )中加進來:
.navbar:extend(.navbar all){ }

你只會將.navbar相關的樣式從bootstrap中引用進來。

inline

使用@import(inline)引用外部文件,但是不處理它們。

發布于v1.5.0

@import (inline) "not-less-compatible.css";

當一個css文件可能無法被less所兼容時,你可以使用這個特性。盡管less支持大部分的標準css,但是它不支持在某些地方的comments和所有沒有修改css的css hacks。
所以你可以使用這個特性將文件包含進輸出中,因此所有的css都會在一個文件中。

less

使用@import (less)將會把導入文件解析成less格式,無論文件是什么格式。

發布于v1.4.0

@import (less) "foo.css";

css

使用@import(css)將會把文件解析成常規的css文件,無論文件是什么格式。這意味著import語句會保持原樣。

發布于v1.4.0

@import (css) "foo.less";

編譯為:
@import "foo.less";

once

@import語句的默認行為,意味著文件只會被導入一次,后續的導入相同文件的語句會被忽略。

發布于v1.4.0

@import (once) "foo.less";
@import (once) "foo.less";//該語句會被忽略

multiple

使用@import(multiple)會允許導入多個相同名字的文件,這行為跟once截然相反。

發布于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)只會導入存在的文件。當導入一個找不到的文件時,如果沒有optional的參數,less將會拋出一個fileerror的錯誤然后停止編譯。

發布于v2.3.0

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容