less學習文檔_第1頁
less學習文檔_第2頁
less學習文檔_第3頁
less學習文檔_第4頁
less學習文檔_第5頁
已閱讀5頁，還剩14頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

溫馨提示

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

評論

0/150

提交評論