less學(xué)習(xí)文檔_第1頁
less學(xué)習(xí)文檔_第2頁
less學(xué)習(xí)文檔_第3頁
less學(xué)習(xí)文檔_第4頁
less學(xué)習(xí)文檔_第5頁
已閱讀5頁，還剩14頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

1、LESS預(yù)處理語言文檔龔意2016-06-241. less入門1.什么是lessless是一門css預(yù)處理語言，它擴展了css語言，增加了變量、混合mixin、嵌套、函數(shù)等特性，使css樣式，更易維護和擴展，less運行在node或瀏覽器端less語言特性2.使用lessØ Node.js安裝less在node.js中安裝LESS最簡單的方式就是使用Node包管理工具npm來安裝:一旦安裝完成，就可以在命令行中調(diào)用，例如:這樣的話編譯后的CSS將會輸出到 'stdout' 中，你可以選擇將這個輸出重定向到文件中:Ø 客戶端中使用less瀏覽器端使用是在使用

2、LESS開發(fā)時最直觀的一種方式。如果是在生產(chǎn)環(huán)境中，尤其是對性能要求比較高的場合， 建議使用node或者其它第三方工具先編譯成CSS再上線使用。首先，引入 rel 屬性的值是 stylesheet/less 的 .less 樣式表 :接下來，下載 less.js 并將其包涵在您的頁面 <head> 元素的 <script></script> 標記中：2. 語言特性1.變量（Variables）通過再less中定義變量，在css樣式規(guī)則中就可

3、直接使用定義的變量，大大減少樣式表中重復(fù)值，需要修改時，直接修改變量值對應(yīng)使用變量的css樣式均會改變；變量也可用于定義選擇器名稱，屬性名和import；最好在單獨的less文件中定義和管理變量；2. 擴展（Extend）Ø 定義extend是一個less偽類，使用extend會合并它所在的選擇器和它所匹配的引用（對樣式進行合并）例： 輸出Ø 為選擇器附加擴展給選擇器附加擴展看起來就像一個普通的帶參數(shù)的偽類選擇器。一個選擇器可以包含多個擴展分支，但是所有的擴展都必須在選擇器的尾部。例：選擇器之后的擴展：pre:hover:extend(div pre)。Ø 規(guī)則集

4、內(nèi)的擴展也可以使用&:extend(selector)語法在規(guī)則集內(nèi)置入extend。將extend放入規(guī)則集內(nèi)是一種將它放入單個規(guī)則選擇器的快捷方式。例：等價于Ø 嵌套選擇器中的擴展extend還可以匹配嵌套選擇器，比如有下面的Less：輸出Ø 擴展中的精確匹配Extend默認會在選擇器之間尋找精確匹配。它不管選擇器是以星號開始還是不是。它也不管兩個nth表達式是否具有相同的意義，它們必須以相同的形式匹配。唯一例外的是屬性選擇器中的引號，less會知道它們是相同的，然后匹配它。例:Ø Extend “all”當你在extend參數(shù)的最后面指定all關(guān)鍵字

5、時，它會告訴告訴匹配作為其他選擇器一部分的選擇器。這個選擇器會被復(fù)制，然后匹配的選擇器部分會使用擴展替換，創(chuàng)建一個新的選擇器。例:輸出Ø 擴展中的選擇器插值Extend不能匹配變量選擇器。如果選擇器包含變量，extend會忽略它。例:Ø 作用域/media內(nèi)的擴展編寫在media聲明內(nèi)的extend也應(yīng)該只匹配同一media聲明內(nèi)的選擇器：例:輸出:Ø 擴展用例經(jīng)典用于就是避免添加基礎(chǔ)類比如，如果你有：如果你想有一個animal子類型，并且要重寫背景顏色。那么你有兩個選擇，首先改變你的HTML或者簡化HTML，然后在你的less中使用extend，比如：Ø

6、; 擴展合并Mixins會復(fù)制所有的屬性到選擇器中，這可能導(dǎo)致不必要的重復(fù)。因此你可以使用extend來代替mixin將你要用的屬性移過去，這樣就會生成更少的CSS。例:輸出Ø 合并樣式（高級mixin）另一個用例可以用作mixin的替代 - 因為mixin僅僅能用于簡單的選擇器，如果你的html中有兩個不同的塊，但是你需要為這兩個塊應(yīng)用相同的樣式，那么你可以使用extend來關(guān)聯(lián)這兩塊。例:3. 混合（mixin）Ø 定義在 Less 中我們可以定義一些通用的屬性集為一個選擇器，然后在另一個選擇器中去調(diào)用這些屬性.例:輸出:Ø 不輸出混合集上個例子會輸出混合集.

7、a如果不想輸出.a只需加入() 如：.a() color:red ;Ø 帶選擇器的混合集混合集不僅可以包含各種屬性，而且可以包括各種選擇器。例:輸出:Ø !important 關(guān)鍵字在調(diào)用的混合集后面追加 !important 關(guān)鍵字，可以使混合集里面的所有屬性都繼承 !important：例：輸出:Ø 帶參數(shù)的混合mixins也可以接受參數(shù)，在它進行mix in操作時會將變量傳遞給選擇器代碼塊。例:調(diào)用:Ø arguments 變量arguments在mixins內(nèi)部有特殊意義，調(diào)用mixin時，它包含所有傳入的參數(shù)。如果

8、你不想單個單個的處理參數(shù)，這一特性是很有用的：Ø 模式匹配有時候，你可能想要基于你傳遞給它的參數(shù)改變mixin的行為。例:調(diào)用：輸出:Ø 混合也可作為函數(shù)使用所有定義在一個mixin中的變量都是可見的，還可以用于調(diào)用它的作用域中（除非調(diào)用它的作用域定義了同名變量）。例:輸出:Ø 傳遞規(guī)則集給混合允許在mixin中定義包裝的CSS塊 例：輸出:Ø 帶條件的混合當你想要匹配表達式，而不是簡單的值或者參數(shù)數(shù)量時，guard是很有用的。如果你熟悉函數(shù)式編程，那么你肯定遇到過這類問題。為了盡可能的保持CSS聲明的本質(zhì)，Less選擇實現(xiàn)了guarded mixins

9、，而不是if/else語句，也就是說并不是一脈相承的實現(xiàn)media查詢的規(guī)范。例:調(diào)用:輸出:guards中可用的比較運算符的完整列表為： >, >=, =, =<, <。此外，關(guān)鍵字true是讓兩個mixins等價的唯一真值您也可以在guards之間使用邏輯運算符。語法是基于CSS媒體查詢。使用and關(guān)鍵字來組合guards：你可以通過用逗號,分隔guards來模仿or運算符，使用 not 關(guān)鍵字來否定條件。還有一些類型檢查函數(shù)可用:iscolor、isnumber、isstring、iskeywo

10、rd、isurl、ispixel、ispercentage、isem、isunit（使用方法:.mixin (a; b: 0) when (isnumber(b) . ）4. 循環(huán)（loops）在Less中，混合可以調(diào)用它自身。這樣，當一個混合遞歸調(diào)用自己，再結(jié)合Guard表達式和模式匹配這兩個特性，就可以寫出循環(huán)結(jié)構(gòu)。例(常用于成柵格系統(tǒng)): 例:輸出:5. 合并merge特性可以從多個屬性中將值集合集合到一個單一屬性之下的逗號或空格分割屬性列表中。對于諸如background和transform之類的屬性來說，merge非常有用。為避免任何非有意的添加，merge需要在每個待加入的聲明中顯

11、示的設(shè)置一個+或者+_標記例:輸出:6. 父級選擇器& 運算符表示一個 嵌套規(guī)則 的父選擇器，它在應(yīng)用修改類或者應(yīng)用偽類給現(xiàn)有選擇器時最常用：例:輸出:3. less 函數(shù)參考1. 雜項函數(shù)Ø Color函數(shù)解析顏色，將代表顏色的字符串轉(zhuǎn)換為顏色值。(color(#ffffff) #ffffff)Ø image-size()/image-width()/image-height()函數(shù)從文件獲取的圖像尺寸/寬度/高度。Ø convert函數(shù)將數(shù)字從一種類型轉(zhuǎn)換到另一種類型。(convert(9cm,"mm"

12、) 90mm)Ø data-uri函數(shù)將一個資源內(nèi)嵌到樣式文件。Ø default函數(shù)沒有匹配到其他自定義函數(shù)（mixin）的時候返回true，否則返回false。 例:輸出:Ø unit（）函數(shù)添加或改變屬性值得單位例子: unit（5,px）=> 5px; unit（5px）=> 5。Ø get-unit（）函數(shù)返回屬性值得單位。2. 字符串函數(shù)Ø escape（）函數(shù)轉(zhuǎn)義函數(shù)。(escape("a=1") a%3D1)Ø e（）函數(shù)預(yù)判函數(shù) 他認為字符串是一個參數(shù)返回不帶引號的原內(nèi)容。(e(“a”

13、) a)Ø %函數(shù)格式化參數(shù) 例：輸出:Ø replace（string,pattern,replacement,flags）函數(shù)替換函數(shù) （參考正則表達式）· 參數(shù):string: 搜索和替換用的字符串;pattern:一個字符串或者能搜索的正則表達式.replacement: 匹配模式成功的替換字符串.flags: (可選的) 正則表達式匹配標識（全匹配還是.）.例:輸出:3. 列表函數(shù)Ø length（list）函數(shù)返回集合中值得數(shù)目。Ø extract（）函數(shù)返回集合中指定索引的值extract（8px dotted red, 2）do

14、tted4. 數(shù)學(xué)函數(shù)Ø ceil（）向上取整函數(shù)Ø floor（）向下取整函數(shù)Ø percentage（）將浮點數(shù)轉(zhuǎn)換成百分比函數(shù)Ø round（）四舍五入取整函數(shù)Ø sqrt（）計算平方根函數(shù)Ø abs（）計算絕度值函數(shù)Ø pow（）乘方函數(shù)Ø mod（）取余函數(shù)返回值與第一個值有相同單位，第二個值的單位被忽略Ø min（）最小值函數(shù)Ø max（）最大值函數(shù)5. 類型函數(shù)Ø iscolor（）函數(shù)Ø isnumber（）函數(shù)Ø isstring（）函數(shù)Ø

15、; iskeyword（）函數(shù)Ø isurl（）函數(shù)Ø ispixel（）函數(shù)Ø ispercentage（）函數(shù)Ø isem（）函數(shù)Ø isunit（）函數(shù)6. 顏色定義函數(shù)Ø rgb（）/rgba（90, 129, 32, 0.5）函數(shù)通過十進制紅色，綠色，藍色，以及 alpha 四種值 (RGBA) 創(chuàng)建帶alpha透明（RGBA）的顏色對象Ø hsl（）/hsla（90, 100%, 50%, 0.5）函數(shù)通過色相 (hue)，飽和度 (saturation)，亮度 (lightness)，以及 alpha 四種值

16、(HSLA) 創(chuàng)建透明（HSLA）的顏色對象Ø hsv（）/hsva(90, 100%, 50%, 0.5）函數(shù)通過色相 (hue)，飽和度 (saturation)，色調(diào) (value)，以及 alpha 四種值 (HSVA) 創(chuàng)建透明(HSVA)的顏色對象。7.顏色通道函數(shù)Ø hue(hsl(90, 100%, 50%)/saturation()/lightness()函數(shù)從HSL色彩空間中提取顏色對象的色相值/飽和度值/亮度值Ø hsvhue(hsv(90, 100%, 50%)/ hsvsaturation() / hsvvalue ()函數(shù)從HSV色彩空

17、間中提取顏色對象的色相值/飽和度值/色調(diào)值Ø red()/green()/blue()/alpha()函數(shù) 提取顏色對象的紅/綠/藍/不透明值8. 顏色操作函數(shù)Ø saturate(hsl(90, 80%, 50%), 20%) /desaturate()函數(shù)增加/降低一定數(shù)值的顏色飽和值Ø lighten()/darken()函數(shù)增加/降低一定數(shù)值的顏色亮度值Ø fade()/fadein()/fadeout()函數(shù)設(shè)置/增加/降低一定數(shù)值的顏色不透明度Ø spin()函數(shù)任意方向旋轉(zhuǎn)顏色的色相角度 .參考hsv或hsl顏色空間模型理解對灰色無效（無飽和度）Ø mix(#ff0000, #0000ff, 50%)函數(shù)根據(jù)比例(50%)混合兩種顏色，包括計算不透明度9. 顏色混合函數(shù)Ø multiply(#ff6600, #000000)函數(shù)分別將兩種顏色的紅綠藍 (RGB) 三種值做乘法運算，然后再除以255，輸出結(jié)果是更深的顏色（對應(yīng)ps中變暗/正片疊底） screen()函數(shù)與其效果相反（對應(yīng)ps中變亮/濾色）Ø overlay()函數(shù)結(jié)合multiply和screen函數(shù)，讓淺的顏色更淺，深的顏色更深（對應(yīng)ps中疊加）Ø hardlight()函數(shù)與 over

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論