CSS預編譯語言Less的用法總結 - 程式前沿
文章推薦指數： 80 %
1、什麼是Less？ less官網：Less is More , Than CSS -少即是多，比CSS 官網gitHub： 1.1 Less介紹Less是一門css預處理語言，或是一種動態樣式 ...
程式語言前端開發IOS開發Android開發雲端運算人工智慧伺服器搜尋資料庫軟體開發工具CSS預編譯語言Less的用法總結2018.06.20前端開發css,lessHOME前端開發CSS預編譯語言Less的用法總結Advertisement目錄1.1、什麼是Less？1.1.1.1Less介紹1.2.1.2Less的優點2.2、如何呼叫less2.1.2.1Less呼叫方法2.2.2.5IDE對應的外掛3.3、Less語法詳解3.1.3.1註釋3.2.3.3巢狀3.3.3.4運算3.4.3.5顏色函式3.5.3.6繼承3.6.3.7匹配模式3.7.3.8其他3.8.3.9總結4.4、Less和Sass的對比4.1.相同點4.2.不同點4.3.總結5.5、參考文件1、什麼是Less？less官網：LessisMore,ThanCSS-少即是多，比CSS官網gitHub：https://github.com/less/less.js1.1Less介紹Less是一門css預處理語言，或是一種動態樣式語言。
擴充套件了css語言，增加了變數、繼承、巢狀、運算、函式等特性，使css更易維護和擴充套件。
（類似jquery）Less既可以在瀏覽器端上執行（支援IE7、chrome、ff等主流瀏覽器，不支援iPad待測試解析：.box{
color:#fe33ac;
border-color:#fdcdea;
}
.box.div1{
width:200px;
height:200px;
background-color:red;
color:#fff;
margin-top:20px;
-webkit-box-shadow:005pxrgba(0,0,0,0.3);
box-shadow:005pxrgba(0,0,0,0.3);
}
.box.div2{
width:200px;
height:200px;
background-color:red;
color:#fff;
margin-top:20px;
-webkit-box-shadow:5px5px5px5px#f938ab;
box-shadow:5px5px5px5px#f938ab;
}現在流行的css預編譯語言：Less和Sass1.2Less的優點簡單，易於維護，CSS管理更加容易高效的進行開發使用Less實現配色將變得非常容易。
與CSS能夠很好地融合使用。
同時相容CSS32、如何呼叫less2.1Less呼叫方法運用GUI工具運用工具koala或者SimpLess是來自動解析成.css檔案（已給大家講過，這裡不在重複）引用less.js進行解析，在頁面引入less.js對.less檔案進行解析。
less官網線上解析：http://less2css.org運用node來解析成css利用gulp等自動化工具進行解析研究中2、外聯樣式
logLevelNumber22–提示資訊（Information）和錯誤（errors）1–錯誤（Errors）0–空（Nothing）javascript控制檯日誌量（錯誤等級）。
注意：在production環境下，獲取不到日誌。
asyncBooleanfalsefalse、true是否非同步匯入檔案fileAsyncBooleanfalsefalse使用檔案協議訪問頁面時非同步載入匯入的檔案。
pollInteger1000在監視模式下，每兩次請求之間的時間間隔（ms）。
functionsObject空在functions這個物件中，key作為函式的名字。
dumpLineNumbersString空comment、mediaQuery、all當設定dumpLineNumbers直接輸出源行資訊到編譯好的CSSS的檔案中時，有利於你除錯指定行。
relativeUrlsBooleanfalse是否調整相對路徑。
如果為false，則url已經是相對於入口的LESS檔案。
rootpathStringfalse新增到每個URL開始處的路徑第三步，引入less.js，在此前加入.less檔案。
程式碼優化考慮，最多巢狀三層。
有&/*生成的CSS*/
#demo2h2{
font-size:18px;
font-weight:bold;
}
#demo2p{
font-size:12px;
color:#90bd39;
}
#demo2pa{
text-decoration:none;
}
#demo2pa:hover{
text-decoration:underline;
}3.4運算運算提供了加減乘除操作，可以對任何數字、顏色、變數進行運算，可以實現屬性值之間的複雜關係。
和Javascript程式碼一樣。
//less
@basewidth:100px;
@baseColor:#111;
@blue:#09c;
.div1{
color:@baseColor*3;
height:@basewidth;
width:@basewidth*2;
}
.div2{
color:@baseColor#003300;
background-color:desaturate(@blue,10%);
}/*生成的CSS*/
.div1{
color:#333333;
height:100px;
width:200px;
}
.div2{
color:#114411;
background-color:#0a94c2;
}運算有順序，和平時的四則運算一樣@var:20px;
.div3{
width:@var5*2;
height:(@var5)*2;
}.div3{
width:30px;
height:50px;
}3.5顏色函式色輪，spin(param1,param2)函式互補色，互補的顏色正好在色輪相反的位置@colorBase:#3bafdA;
@colorComplement:spin(@colorBase,180);//得到#dc6939三元色。
我們可以進一步探討顏色模型並且建立一個三元色結構。
“三元”，顧名思義，是由三種顏色組成。
因此，我們將色輪分成三部分，並且用函式spin()來設定旋轉的度數：@triadicSecondary:spin(@colorBase,-(360/3));//第二種顏色#b1d926
@triadicTertiary:spin(@colorBase,360/3);//第三種顏色#db43b2混合色，mix(param1,param2)，對兩個顏色進行混合#div1{color:mix(red,yello)}//#ff800明暗度，lighten(param1,param2)淺一點，darken(param1,param2)深一點@ahover:lighten(@colorBase,10%);
@afocus:darken(@colorBase,10%);飽和度，saturate(param1,param2)和desaturate(param1,param2)。
飽和度定義了一種顏色的深度。
飽和度越大，顏色越亮麗，最低飽和度則會使顏色趨於灰色。
@btnHover:saturate(@colorBase,10%);
@btnFocus:desaturate(@colorBase,10%);
@btnDisable:lightness(desaturate(@colorBase,100%),30%;智慧色彩輸出。
LESS讓我們的樣式變得更智慧。
舉例來說，我們能讓我們的樣式自己“思考”並決定什麼顏色在什麼條件下適用。
假設我們正在建立一個網站模板，這是按鈕的基本樣式，你打算用不同的顏色和風格來擴充套件它。
但是我們怎樣控制顏色的輸出呢？我們當然不希望深色的文字在深色的背景上，反之亦然。
我們需要確保文字保留對比，以便於閱讀，這樣，contrast()函式就派上用場了。
@bColor:#000;
div{
background-color:@bColor;
color:contrast(@bColor);//#ff
}3.6繼承混合可以將一個定義好的classA輕鬆引入到另個classB裡面，從而簡單實現classB繼承classA中的所有屬性。
還可以帶引數呼叫，和函式一樣。
有預設值,也可以不加預設值，或者是不加引數、多個引數都可行。
需要帶括號，如果是沒有變數的時候可不帶括號。
例如：//less
.rounded-corners(@radius:5px){
width:100px;
height:30px;
margin-bottom:10px;
background-color:#ccc;
color:#333;
border-radius:@radius;
-webkit-border-radius:@radius;
-moz-border-radius:@radius;
}
.div1{
.rounded-corners();//.rounded-corners;
}
.div2{
.rounded-corners(10px);
}/*生成的CSS*/
.div1{
width:100px;
height:30px;
margin-bottom:10px;
background-color:#ccc;
color:#333;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
.div2{
width:100px;
height:30px;
margin-bottom:10px;
background-color:#ccc;
color:#333;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}3.7匹配模式匹配模式，即使同一個函式用不同的引數時呼叫不同的方法。
例如寫一個三角：.triangleBase{
width:0;
height:0;
overflow:hidden;
}
.triangle(top,@w:5px,@c:#ccc){
.triangleBase;
border-width:@w;
border-color:@ctransparenttransparenttransparent;
border-style:soliddasheddasheddashed;
}
.triangle(bottom,@w:5px,@c:#ccc){
.triangleBase;
border-width:@w;
border-color:transparenttransparent@ctransparent;
border-style:dasheddashedsoliddashed;
}
.div1{
.triangle(top);
}
.div2{
.triangle(bottom);
}另一種寫法，@_生成的css：.div1{
width:0;
height:0;
overflow:hidden;
border-width:5px;
border-color:#cccccctransparenttransparenttransparent;
border-style:soliddasheddasheddashed;
}
.div2{
width:0;
height:0;
overflow:hidden;
border-width:5px;
border-color:transparenttransparent#cccccctransparent;
border-style:dasheddashedsoliddashed;
}3.8其他@arguments變數包含所有傳遞進來的引數。
//@argumentts變數
.border(@w:30px,@c:red,@s:solid){
border:@arguments;
}
.test_arguments{
border();
}避免編譯，有時候需要輸出一些不正確的css語法或者使用一些Less不認識的專有語法，在前面加入~.test{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=20);
}!important關鍵字，會為所有混合所帶來的樣式，新增上!important.test{
.border()!important;
}JavaScript賦值，在樣式表中使用Javascript——相當精彩。
你可以使用表示式，也可以參考環境方向來使用反單引號。
@string:`'hello'.toUpperCase()`;/*@string變成'HELLO'*/
/*你也可以使用前面提到的插值：*/
@string:'HELLO';
@var:~`'@{string}'.topUpperCase()`;/*變為'HELLO'*/
/*獲取文件的資訊*/
@height=`document.body.clientHeight`;@import，用@import匯入css或者less檔案，減少伺服器資源請求less檔案可以省略字尾名，同時可以在檔案任意地方引入css檔案需要加入字尾名用@import時，Koala編譯會讓軟體崩潰，用node吧！3.9總結註釋，可解析註釋和不可解析的註釋變數用@4、Less和Sass的對比相同點兩者都是css預編譯很多語法類似，思想一樣不同點Less環境以及使用方面比Sass簡單條件語句與控制，less不支援。
Sass可以使用if{}else{}條件語句，以及for{}迴圈。
它甚至支援and、or和not，以及、<=、>=和==等操作符。
koala輸出格式，LESS：normal（正常）、compress（壓縮）。
而Sass提供4中輸出選項：nested（正常縮排）、expanded（括號不單獨佔一行）、compact（一個類一行顯示）和compressed（壓縮為一行）。
less基於純JavaScript，通過伺服器端來處理的；Sass是基於Ruby的，在伺服器端處理。
總結如果你是Ruby或HAML的粉絲，那麼Sass會是你的好助手。
對我來說，一個前端開發人員，我傾向於LESS，因為它便於引入和能夠使用JavaScript的表示式以及文件屬性。
對於新手來說更簡單可用。
對於剛接觸的css預編譯的前端，我推薦用Less。
5、參考文件http://www.lesscss.nethttp://lesscss.cn/usage/http://less.bootcss.com/usage/http://www.lesscss.net/#using…Less中文網color顏色函式如何在瀏覽器中除錯less&sass原始碼，其中還有對應的PPT，想要看PPT的可以私信或留言給我，我發給大家。
AdvertisementAdvertisement写评论取消回覆很抱歉，必須登入網站才能發佈留言。
近期文章Sizzle源碼分析(四)：Sizzle是如何選擇元素的2020.01.09基於Charles，如何利用代理技術進行接口mock測試2020.01.09Spring中FactoryBean的作用和實現原理2020.01.09SpringMVC加載流程2020.01.09HashMap原理技術知識整理2020.01.09淺談MySQL的事務與ACID2020.01.09FishRedux完成一個玩安卓客戶端2020.01.09Elasticsearch調優篇慢查詢分析筆記2020.01.09Hadoop完全分佈式安裝與部署2020.01.09Scala教程之:可變和不變集合2020.01.09AdvertisementAdvertisement
延伸文章資訊
- 1最新消息- LESS CSS多不一定好,佈局框架,CSS Grid - 網頁設計
網頁設計方便又好用的CSS 工具：LESS is More , Than CSS.多不一定好、卻能更加有彈性.
- 2Less 快速入门| Less.js 中文文档- Less 中文网
Less 扩充了CSS 语言，增加了诸如变量、混合（mixin）、运算、函数等功能。 Less 既可以运行在服务器端（Node.js 和Rhino 平台）也可以运行在客户端（浏览器）。
- 3CSS 預處理器SASS、LESS 介紹 - 歐斯瑞
什麼是CSS 預處理器（CSS preprocessor）？ · SASS（SCSS） · LESS · Stylus · Turbine · Switch CSS · CSS Cacheer ...
- 4[JavaScript] [CSS] LESS.js 介紹 - iT 邦幫忙
¨LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS...
- 5CSS 的變種： LESS 與SASS
LESS 是由Alexis Sellier 所設計的工具，原本是用Ruby 實作，用來將LESS 語法轉換成CSS 語言。後來改用JavaScript 設計後，就能內嵌到瀏覽器中，動態的將LES...
