less简介、less安装、编译、less语法之变量、嵌套、类混入、函数混入、运算、less文件导入
less基礎(chǔ)：
CSS是一門非程序語(yǔ)言，沒(méi)有變量、函數(shù)、作用域等，此時(shí)使用rem單位就會(huì)出現(xiàn)圖片等大量計(jì)算尺寸的問(wèn)題，但是less可以輕松實(shí)現(xiàn)運(yùn)算，它是CSS預(yù)處理語(yǔ)言，引入了變量、混入、函數(shù)等，常見(jiàn)的CSS預(yù)處理語(yǔ)言還有：Sass、Stylus等，Less中文網(wǎng)址：http://lesscss.cn
Less安裝：
①安裝nodejs：進(jìn)網(wǎng)址：http://nodejs.cn/download，選擇對(duì)應(yīng)自己電腦系統(tǒng)的node下載安裝，檢查是否安裝成功：cmd控制臺(tái)鍵入 node -v ， 若出現(xiàn)有node版本信息則安裝成功。
②基于node下的npm安裝：cmd控制臺(tái)鍵入 npm install -g less ，檢查是否安裝成功：cmd控制臺(tái)鍵入：lessc -v ，若出現(xiàn)less版本信息，則安裝成功。
Less編譯：
less本質(zhì)上是由一套自定義語(yǔ)法及一個(gè)解析器組成，根據(jù)語(yǔ)法定義自己的less文件，最終會(huì)編譯成CSS文件供html使用。
Easy LESS插件：把less文件編譯成css的VScode插件，在VScode安裝此插件后，保存less文件后會(huì)自動(dòng)生成對(duì)應(yīng)的css文件，把此css文件引入html文件即可。
less.js插件：less文件不能直接在瀏覽器被解析，因此是不能直接將less文件通過(guò)link引入到html文件中的；但是可以通過(guò)引入js插件less.js同時(shí)聲明link標(biāo)簽中type屬性的值為text/less就可以被轉(zhuǎn)化為在瀏覽器可識(shí)別的css，less被獲取是通過(guò)ajax請(qǐng)求的，因此不能通過(guò)files的形式訪問(wèn)，如：
<head><link rel="stylesheet" type="text/less" href="lib/less/less.less"><script src="lib/less/less.js"></script> </head>less語(yǔ)法：
less文件中可以直接 寫css代碼,開始less編碼時(shí)建議聲明字符編碼輯。
less中的注釋：less中有兩種注釋語(yǔ)法，如下：
@charset:'UTF-8';/*注釋內(nèi)容,可以編譯到css文件中*///注釋內(nèi)容，不能編譯到css文件中變量：沒(méi)有固定的值，可以改變，css中的顏色值和數(shù)值經(jīng)常使用，語(yǔ)法：@變量名:值 ，（變量名規(guī)范：必須以@為前綴、不包含特殊字符、不以數(shù)字開頭、字母區(qū)分大小寫），less中字符串拼接需要將變量名通過(guò){}包裹，如：@color:pink; 、@number:10;、.{@className}
嵌套：在less中可以像html一樣，如果標(biāo)簽是父子級(jí)關(guān)系，可以嵌套書寫，編寫后會(huì)生成對(duì)應(yīng)的父子級(jí)形式的選擇器，less語(yǔ)法中偽類偽元素前面要加 & 符號(hào)才表示當(dāng)前元素的偽類，否則表示此元素的子代偽元素，如：
@bgcolor:rgb(199, 235, 250);@font12:12px;@className:box;div {background-color: @bgcolor; a {font-size:@font12;// less語(yǔ)法中偽類前面要加 & 符號(hào)才表示當(dāng)前元素的偽類，若不加則表示此元素的子代偽元素：&:hover {color:bisque;} }}.@{className}{color:red;};//編譯后的css代碼：//div {// background-color: #c7ebfa;//}//div a {// font-size: 12px;//}//div a:hover {//若less前面沒(méi)有加 &，則解析成div a :hover// color: bisque;//}// .box {// color: red;// }混入：混入分類混入和函數(shù)混入，類混入是將若干個(gè)類在另一個(gè){}中使用()調(diào)用，使被調(diào)用的類的屬性代碼在新的類中生成，如：
.floatLeft{float:left;}.bgc{background-color:blue;}// 將上面兩個(gè)類的屬性及值混入到新的類中：.box{.floatLeft();.bgc();}//生成的對(duì)應(yīng)css代碼：.floatLeft {float: left;}.bgc {background-color: blue;}.box {float: left;background-color: blue;}函數(shù)混入：由于類混入定義的類會(huì)編譯到css代碼造成代碼冗余，這樣不太好，可以使用函數(shù)混入，解決這個(gè)代碼冗余的情況，函數(shù)語(yǔ)法：.函數(shù)名(){};，使用時(shí)是將類定義到函數(shù)中，在另一個(gè)類中使用時(shí)，直接調(diào)用函數(shù)即可，但是不會(huì)在css代碼中生成類，函數(shù)里面可以傳入?yún)?shù)，但是定義了參數(shù)后就必須傳入?yún)?shù)，否則會(huì)報(bào)錯(cuò)，但是可以傳入默認(rèn)參數(shù)，就是在形參變量名后面加冒號(hào)，冒號(hào)后面的值即為默認(rèn)值，如：
@fl:left;@fr:right;.floatLeft(@left:left){//定義了默認(rèn)值為leftfloat: @left;}.bgc(){background-color: blue;}.box {.floatLeft(@fr);//當(dāng)不傳入?yún)?shù)時(shí)，會(huì)使用默認(rèn)值left.bgc();}// 生成的css代碼：.box {float: right;background-color: blue;}混入函數(shù)定義中{}里面可以繼續(xù)定義類，便于將代碼重用和方便管理，要想使用到函數(shù)里面具體的某個(gè)類時(shí)，直接通過(guò)函數(shù)名加類名的方式就可以調(diào)用到，如：
.bgc(){.yello{color:yello;}.width{width:20px;} } .box {.bgc.width; } //使用.bgc函數(shù)中的.width編譯后生成的css代碼如下：切記調(diào)用時(shí)函數(shù)名后面不能加() .box {width: 20px; }映射：通過(guò)上面代碼可以看出混入函數(shù)中可以定義類，less3.5開始可以定義映射，簡(jiǎn)單的說(shuō)就是在函數(shù)中可以定義key和value鍵值對(duì)，使用時(shí)可以通過(guò)[]加鍵拿到具體的value,如：
.bgc(){divcolor:blue;key:value; } .box {color:.bgc[divcolor];font:.bgc[key]; } //使用.bgc函數(shù)中定義的key和value編譯后生成的css代碼如下： .box {color: blue;font: value; }作用域：less 中的作用域和css中的作用域相似，都是先從本作用域查找，找不到繼續(xù)往父級(jí)查找，如：
@color: yellow; div {@font: 20px;p {color: @color;font-size:@font;} } //編譯后的代碼如下： div p {color: yellow;font-size: 20px; }運(yùn)算：less語(yǔ)法提供了加(+)減(-)乘(*)除(/或外面加小括號(hào))等運(yùn)算，任何的數(shù)字、顏色、變量都可以參與運(yùn)算。運(yùn)算符號(hào)左右兩邊必須要用空格隔開，如果兩個(gè)變量中只有一個(gè)變量有單位或兩個(gè)變量的單位相同時(shí)，則結(jié)果的單位就是其中的這個(gè)單位；當(dāng)兩個(gè)變量都有單位時(shí)，以前面變量的單位為結(jié)果的單位；
@fontsize:12px;@width:200px;div {width: (24 / @fontsize);height: @width / 2rem;border: 12rem / @fontsize solid (#333222 - #111222);}//對(duì)應(yīng)的css代碼：//div {// width: 2px;// height: 100px;// border: 1rem solid #222000;//}calc() ：使用calc()后，將不再對(duì)數(shù)學(xué)表達(dá)式進(jìn)行計(jì)算，但是在嵌套函數(shù)中是會(huì)計(jì)算變量和數(shù)學(xué)公式的值，如：
@add: 20px/2; @num:calc(20px/2); div{width:calc(20% + (@add - 5px));height:@num; };//對(duì)應(yīng)生成的css代碼如下： div {width: calc(20% + (10px - 5px));height: calc(20px/2); }轉(zhuǎn)義：將所有字符串作為屬性或變量值，除interpolation外，語(yǔ)法是：~‘字符,串’，如：
@maxw: ~"(max-widht: 1200px)";//less3.5后可以省略~及引號(hào)，直接寫成@maxw:(max-widht: 1200px) div {@media @maxw {width:1200px;} }//上面代碼是生成一個(gè)條件為max-widht: 1200px的媒體查詢，編譯后的代碼如下： @media (max-widht: 1200px) {div {width: 1200px;} }函數(shù)：less和其他語(yǔ)言一樣內(nèi)置了很多好用的函數(shù)，小編在這里不做過(guò)多的強(qiáng)調(diào)了，如需了解更多，可以閱讀官方文檔函數(shù)篇：https://less.bootcss.com/functions/,這里介紹高頻使用的函數(shù)：
//1.length(array):獲取array數(shù)組的長(zhǎng)度，less中也是可以定義像其他語(yǔ)言類似的數(shù)組，其語(yǔ)法如：@arr:320px,540px,750px,920px,1200px;//less中定義數(shù)組不使用[]包裹。//獲取arr數(shù)組的長(zhǎng)度，并賦值給變量arrLength：@arrLength:length(@arr);//2.extract(arr,index);獲取數(shù)組arr中第index個(gè)元素，如獲取@rr中的第二個(gè)元素并賦值給@arrSecond：@arrSecond:extract(@arr,2);//特別提醒，元素是從1開始計(jì)算的。less中函數(shù)實(shí)現(xiàn)遍歷功能：less語(yǔ)言中沒(méi)有遍歷，若要實(shí)現(xiàn)遍歷的方法，可以通過(guò)函數(shù)自調(diào)用的方式來(lái)模擬遍歷，但是函數(shù)自調(diào)用可能會(huì)陷入死循環(huán)，因此需要加入條件（此方法常用于rem + less + 媒體查詢 布局中，因?yàn)閞em + less布局時(shí)需要適應(yīng)多款設(shè)備，此時(shí)就要定義多個(gè)html根font-size的值，為了更好的維護(hù)，采用函數(shù)模擬遍歷的方式可自動(dòng)生成多種font-size的值，如下案例：）
//.functionName(參數(shù)) when (條件){code},less中函數(shù)可以使用when加條件，當(dāng)條件滿足時(shí)會(huì)執(zhí)行函數(shù)，否則不再執(zhí)行函數(shù)，如： .setFontSize(@index) when (@index <= @arrLength){@media （min-widht:extract(@arr,@index)）{html{font-size:@baseSize / @psdWidth * extract(@arr,@index);};};.setFontSize(@index + 1);//函數(shù)自己調(diào)用自己實(shí)現(xiàn)遍歷效果，每次調(diào)用時(shí)參數(shù)+1來(lái)提滿足判斷條件 };//調(diào)用： .setFontSize(1);//調(diào)用時(shí)傳入?yún)?shù)1，從1開始遍歷將一個(gè)less文件導(dǎo)入另一個(gè)less文件：
@import "common.less"提示：本文圖片等素材來(lái)源于網(wǎng)絡(luò)，若有侵權(quán)，請(qǐng)發(fā)郵件至郵箱：810665436@qq.com聯(lián)系筆者 刪除。
筆者：苦海
總結(jié)
以上是生活随笔為你收集整理的less简介、less安装、编译、less语法之变量、嵌套、类混入、函数混入、运算、less文件导入的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： python主成分分析实验报告_pyth
- 下一篇： java gson序列化_java –