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