[TOC] ## 前言 Less 是一門 CSS 預處理語言，它擴展了 CSS 語言，增加了變量、Mixin、函數等特性，使 CSS 更易維護和擴展。Less 可以運行在 Node 或瀏覽器端。 ## 使用入手 ### 文件使用 * 下載less.min.js 通過瀏覽器實時編譯less文件 ~~~ <link rel="stylesheet/less" type="text/css" href="styles.less" /> <script> //設置opt less = { env: "development" }; less.watch();//代碼監測 </script> <script src="less.min.js"></script> ~~~ * npm安裝less模塊，編譯less文件使用 ~~~ npm i less --save-dev $ lessc bootstrap.less bootstrap.css lessc --help lessc -h ~~~ * 使用gulp-less模塊，編譯less文件使用 * 其他ide的支持 * css的插件，只列舉兩個，其他不常用 `npm install less-plugin-clean-css` > Autoprefixer 自動加瀏覽器前綴 > clean-css 壓縮樣式 * 其他框架使用情況：bootstrap，ionic * gui工具：koala ，見zjfe軟件 * ide中包含插件的有：eclipse,sublime,vs,notepad,hb,ws * 第三方編譯，gulp-less 推薦使用 ## 語法 ### less文件 * 基本語法 @import variable.less; //后綴名為less可以省略文件后綴名 * The following import directives have been implemented: > reference: use a Less file but do not output it > inline: include the source file in the output but do not process it > less: treat the file as a Less file, no matter what the file extension > css: treat the file as a CSS file, no matter what the file extension > once: only include the file once (this is default behavior) > multiple: include the file multiple times > optional: continue compiling when file is not found * 具體的解釋以及參數的結果可以查閱官網，我們一般都是使用less文件 ### less變量 變量允許我們單獨定義一系列通用的樣式，然后在需要的時候去調用。所以在做全局樣式調整的時候我們可能只需要修改幾行代碼就可以了。 需要注意的是變量是全局變量還是頁面變量，區別引用位置. * 基本使用，最常見的作為樣式屬性值本身。 ~~~ @color: #4D926F; #header { color: @color;} ~~~ * 變量支持直接變量也支持變量、字符串、簡單的運算等 ~~~ @light-blue: @nice-blue + #111; @cont:“是一個前端”； @width:2-1px+8mm; //結果是9px @link-color: #428bca; // sea blue @link-color-hover: darken(@link-color, 10%); ~~~ * 變量支持作為選擇器 ~~~ // Variables @my-selector: banner; // Usage .@{my-selector} { font-weight: bold; line-height: 40px; margin: 0 auto; } ~~~ * 變量支持作為url,比如圖片，樣式等相關前端資源的路徑 ~~~ // Variables @images: "../img"; // Usage body { color: #444; background: url("@{images}/white-sand.png"); } ~~~ * 變量支持作為屬性名稱 ~~~ @property: color; .widget { @{property}: #0ee; background-@{property}: #999; } ~~~ * 懶加載機制 該原理允許樣式使用后面定義的變量，而不用考慮先后順序 ~~~ .lazy-eval-scope { width: @var; @a: 9%; } @var: @a; @a: 100%; ~~~ * 不支持默認值 因為變量很容易被之后的變量覆蓋更改值。 ### 拓展、繼承 * 基本使用 混合可以將一個定義好的class A輕松的引入到另一個class B中，從而簡單實現class B繼承class A中的所有屬性。(默認只能繼承單類的，如果想下屬所有樣式都繼承，需要加all參數） ~~~ .inline { display:inline； span{ color:red; } } //不括子選擇器樣式 nav span:extend(.inline){ } //包括子選擇器繼承 nav span:extend(.inline all){ } ~~~ * 支持繼承多個，支持選擇器繼承 ~~~ //后代選擇器繼承 nav span:extend(.inline span){ } //多繼承 nav span:extend(.inline)：extend(.color){} ~~~ * 支持標簽內寫法 ~~~ nav span{ &:extend(.inline); } ~~~ * 其他說明 > 1.不支持不確切的選擇器，比如*.class > 2.不支持包含其他條件的選擇器 ，比如.c.class.v > 3.不支持nth-child 的選擇器 > 4.媒體查詢中使用，定義在頂部的以及另一個媒體查詢段的樣式組不可用的。 > 5.使用選擇器組定義的樣式是無效的，.a,.b{} > 6.可以代替函數做代碼縮減，函數調用會不斷的重復，而拓展繼承則會吧繼承的放在一起聲明。（非常重要） ### 混合 * 基本使用，把式組合起來，用mix-in ~~~ .a, #b { color: red; } .mixin-class { .a(); } .mixin-id { #b(); } ~~~ * 自定義樣式把樣式組合 ~~~ .my-mixin { color: black; } .my-other-mixin() { background: white; } .class { .my-mixin; .my-other-mixin; } ~~~ * 支持命名空間，也就是符合選擇器的樣式,其中()是可選的。 ~~~ .a { .inner{} } .class { .a .inner; } .class2 { .a .inner(); } ~~~ * 把當前選擇器包括進去，包含樣式 ~~~ .my-hover-mixin() { &:hover { border: 1px solid red; } } button { .my-hover-mixin(); } ~~~ * 帶參數的混合 ，支持參數默認值 ~~~ .border-radius(@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } ~~~ * 帶多個參數的混合 ，支持參數默認值，其中使用時依次復合，要求必須傳入參的是不會被混合的 ~~~ .mixin(@color) { color-1: @color; } .mixin(@color; @padding: 2) { color-2: @color; padding-2: @padding; } .mixin(@color; @padding; @margin: 2) { color-3: @color; padding-3: @padding; margin: @margin @margin @margin @margin; } .some .selector div { .mixin(#008000); } //compile into .some .selector div { color-1: #008000; color-2: #008000; padding-2: 2; } ~~~ * 形參規則，針對都有默認指的形參，可以根據實際情況自己去解析。可以傳入變量或者不傳（按照順序） ~~~ .mixin(@color: black; @margin: 10px; @padding: 20px) { color: @color; margin: @margin; padding: @padding; } .class1 { .mixin(@margin: 20px; @color: #33acfe); } .class2 { .mixin(#efca44; @padding: 40px); } ~~~ * 形參規則，針對都有默認指的形參，可以根據實際情況自己去解析。可以傳入變量或者不傳（按照順序） ~~~ .mixin(@color: black; @margin: 10px; @padding: 20px) { color: @color; margin: @margin; padding: @padding; } .class1 { .mixin(@margin: 20px; @color: #33acfe); } .class2 { .mixin(#efca44; @padding: 40px); } ~~~ * 作為變量組或者運用變量運算結果 ~~~ //變量組 可以理解為有作用域的變量 .vars1() { @width:100px; @height:50px; } .class1 { .vars1(); width: @width; height: @height; } //變量運算 .vars2(@x,@y) { @aver:(@x+@y)/2; } .class2 { .vars2(@x,@y); width:@aver; } ~~~ * 其他，補充說明其他特性，因為使用并不是很多只作為了解即可 1. 感覺參數很多，比較麻煩，可以用@arguments來代表所有參數 2. 可以用`...`來代表后面有很多參數可傳 3. 可以使用邏輯判斷來限制樣式使用條件，`.truth (@a) when (@a = true) { ... }` 4. 特殊的檢查語法， iscolor isnumber isstring iskeyword isurl ispixel ispercentage isem isunit 5. 符合條件以及不符合條件的默認情形 ~~~ .mixin (@a) when (@a > 0) { ... } // matches only if first mixin does not, i.e. when @a <= 0 .mixin (@a) when (default()) { ... } ~~~ ### merge 歸并 * 該條允許你把一些樣式值歸并到已經有的樣式值中,以`，` 分隔 ~~~ .mixin() { box-shadow+: inset 0 0 10px #555; } .myclass { .mixin(); box-shadow+: 0 0 20px black; } //compile into .myclass { box-shadow: inset 0 0 10px #555, 0 0 20px black; } ~~~ * 該條允許你把一些樣式值歸并到已經有的樣式值中,以空格分隔 ~~~ .mixin() { transform+_: scale(2); } .myclass { .mixin(); transform+_: rotate(15deg); } //compile into .myclass { transform: scale(2) rotate(15deg); } ~~~ ### 嵌套結構 * 嵌套（有dom層級結構的嵌套） 我們可以在一個選擇器中嵌套另一個選擇器來實現繼承，這樣很大程度減少了代碼量，并且代碼看起來更加的清晰，于一個模塊最好。 ~~~ #header { h1 { font-size: 26px; font-weight: bold; } } ~~~ * &代表當前標簽，允許你在當前結構下不重復寫當前選擇器名稱 ~~~ #header { &{ color: blue; } &-link{ cursor: pointer; } &：h1 { font-size: 26px; font-weight: bold; } } ~~~ * 其他語法 1. 允許改變選擇器的結構，可以在當前樣式下追加前面的結構 2. 組合前面任意的群組選擇器，而不用重復指代名稱 ~~~ p, a, ul, li { border-top: 2px dotted #366; & + & { border-top: 0; } } ~~~ ### 函數手冊（非重點學習內容） * 雜項函數 * 字符串函數 * 列表函數 * 數學函數 * 類型函數 * 顏色定義函數 * 顏色通道函數 * 顏色操作函數 * 顏色混合函數 ### 其他 詳細學習文檔參考官網：[less中文網](http://lesscss.cn/features/)