一、關於變數
less中的變數要使用@***宣告。
變數的使用方式
1.作為普通的變數
比如
@color:red;
使用的話就在css中
div
比如有乙個div
定義乙個變數
@mydiv:width;
@:200px;
}編譯後css為
.width
另外，less變數的特性：1.延遲載入 2.當有多個相同的變數名時，使用最後乙個。
二、混合，所謂混合，就是一種將乙個規則集引入另乙個規則集的方式
1.普通混合
定義乙個混合集.font_h
h1編譯後
h1
2.不帶輸出的混合，就是當你在乙個css樣式中引入乙個混合集，卻又不想改混合集輸出到css樣式中去渲染，可以在該混合集後加乙個()
.font_h
h1編譯後
h1
.hover-mixin
}bottom
編譯後bottom:hover
.maxin(@color:blue)
div使用的時候應該傳乙個色值進去，如果沒有引數，就使用預設值blue
6.匹配模式，在傳值的時候定義乙個字元，使用的時候使用哪個字元就呼叫哪條規則。
.color(r,@color:red)
.color(b,@color:blue)
.color(g,@color:green)
h1編譯後
h1
四、父元素選擇器符號&。表示當前選擇器的所有父選擇器
如果將&放到當前選擇器之後，就會當前選擇器插入到所有父選擇器之前
&&組合使用可以生成所有可能的選擇器列表
五、運算功能 任何數值 顏色 變數都可以計算
六、函式。less內部封裝了很多函式可以呼叫
七、作用域。同js程式語言的作用域概念很像，不過less是在父作用域尋找變數。
八、條件表示式
1.比較運算子：>,<, <=, >=, = ,true
比如
#layout(@name)
}
3.單位檢查函式：檢查乙個值除了是數字，是否是乙個特定的單位。
ispixel, ispercentage , isem, isunit等。
九、迴圈，混合可以呼叫自身，結合條件表示式，就可以寫出迴圈。
.loop(@counter)when(@counter>0)
div編譯後
div
只要在需要合併的屬性的：前面加上 + 號即可。
合併以逗號,分隔屬性
可以使用+_分隔所有合併的屬性。
Less 使用小結
參考 less 中文教程 最新的less loader配置有問題，採用5.0.0 npm install less loader 5.0.0在配置中config overrides.js，自定義配置檢視customize ora配置 const require customize cra modul...
less使用有感
今天第一次使用了之前學的less，感覺非常棒，寫的時候不斷讓我覺得花費精力去學習這貨是值得的 為什麼我們要使用less？在我們寫css的時候一般是沒有注意到層次結構的，哪怕我們刻意去劃分好乙個乙個頁面，寫到最後就會發現四處引用，亂成麵條一樣，每修改一處還怕別的地方也被改了 less就能解決這個問題，...
Less基本使用
因為css是標記語言，無法定義變數 進行計算等，會有很多冗餘 而less scss等正是改變了這一缺點。less是一門css的擴充套件語言，是css的預處理語言，他可以編寫樣式的同時使用變數 進行計算，減少冗餘 提高開發效率 定義變數基本格式為 變數名 變數值 使用的時候可以直接當成變數去使用 如 ...