一 前期準備工作：

• 1.下載less編輯器，下載地址：koala-app.com/index-zh.ht…
• 2.建立less文件，在style.css中建立；
• 3.在新建立的less文件中，聲明文檔頭部@charset
• “utf-8”，把less文件拖到考拉編輯之中，在koala編輯器中找到less文件，右鍵，輸出路徑，文件名改成main.css文件，點擊右側，執行編輯，在index.html中用link把新生成的main.css引入即可，直接在less文件中寫樣式
• 4.koala編輯器右側有輸出方式選擇， （1）：normal是正常樣式 （2）：compress是以壓縮的方式輸出

二 正式開發：

1.注釋兩種選擇： （1）：/**/ 可保留的注釋 （2）：// 不可保留的注釋 2.變量 聲明變量用@ 后面加隨意起的名字 例如：@height，@width; 例子：@height = 200px；.box{height:@height} --->輸出 .box{width=200px;} 3.混合 把 .border中的屬性全部放到 .box中 例子： .box{height:@height.border } --->輸出 .box{height:@height；border:1px solid red} .border{border:1px solid red} 4.混合--可以帶參數的 例子：.border-02(@border-width){border:solid red @border-width}.box{.border-02(30px)} 5.混合--可以帶默認值（也可以直接更改默認值） 例子：.border-02(@border-width：10px){border:solid red @border-width}.box{.border-02()} ---->1.使用默認值10px.box{.border-02(30px)} ---->2.更改默認值為30px 6.匹配模式 @- ： 是全部帶上的意思 7.運算：直接進行加減乘除 + - * /顏色值也可以運算，原理是講#ccc轉成260數字進行計算 8.嵌套：盡量避免多次嵌套，最多不要超過三層嵌套& ：這個符號是上一層的選擇器例如在a后面加hover效果：a {float:left&:hover{red}} --->劃過的效果是紅色的 9.@arguments變量 注釋：@arguments包含了所有傳遞進來的參數，如果你不想單獨使用每一個參數的話，可以像這樣寫： .border(@w:10px;@h:20px;@c:red){border:@argumengs; --->將變量全部傳入到border中 } .border-arg{.border(40px) --->將寬度變成40px，其他值不變 } 10.避免編譯：“~"" ” 例子： 方法一： .test{width: ~"calc(300px-20px)" } 方法二： div {    @diff : 30px;    width : calc(~"100% - @{diff}");   } 11.!impotant是優先級最高的意思 12. 引入另一個less文件或者css文件（在原來的less文件內部引入）@import "a" --->less文件@import （less）“a.css”--->css文件 將新引入的文件寫在那個位置，就會引入到那個位置 復制代碼

轉載于:https://juejin.im/post/5c93651451882572e92c47be

總結

以上是生活随笔為你收集整理的less学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。