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