最近在專案的開發過程中，發現自己的css的**的層級解構不明確，而且很多的地方寫的比較凌亂。在後期新增功能的過程中，往往都是在上面加一段css,有時候比較懶，就會直接綴在css**的最後。這往往導致在後期修改css**的時候，很不容易找到自己的**。
less的出現很大程度上的幫我們解決了這個問題。less是css的預處理語言，它擴充套件了css語言，增加了變數，minix,函式等特性。使用了less之後它會使你的css的結構更加明確，**更加簡潔，重用率更高，也方便後期的維護。
下面我們來說一說它的基本用法：
1.結構
.wrap }}
轉義後的結果為：
.wrap
.wrap .box
.wrap .box:hover
@base-color:#3636d5;
@high-color:@base-color+#111;
#box
轉為css：
#box
.show
.menu
.list
轉化後的結果為：
.show
//以下的兩種方法都可行
.menu
.list
@conversion-1: 5cm + 10mm; // 6cm
@conversion-2: 2 - 3cm - 5mm; // 1.5cm
@incompatible-units: 2 + 5px - 3cm; // 4px
@base: 5%;
@filler: @base * 2; // 10%
@other: @base + @filler; // 15%
@base: #f04615;
@width: 0.5;
.class
轉化後的結果：
.class
#bundle
.border
}#box
轉化後的結果為:
#bundle .button
#bundle .border
#box
@selector:box;
@img: "../../assets";
@themes: "../../src/themes";
@property: color;
#@#content /user-acvtor.png");
}.widget : #0ee;
background-@: #999;
}@import "@/lib.less";
轉化後的結果：
#box
#content
.widget
@import "../../src/themes/lib.less";
引入less之後，再定義變數，覆蓋之前的樣式
9.擴充套件
#item()
#box
轉義後的結果：
#box
使用()之後在其他選擇器中混入，頁面中不會再出現該樣式。
less的使用 基本語法 編譯
注釋 會被刪除 不會被刪除1.變數為屬性值定義變數 變數名 變數值 使用變數 屬性 變數名 變數 main color 333 用法 body2.變數為屬性或者為選擇器定義變數 變數名 變數值 使用變數 屬性值 變數 property color 屬性 用法 body 333 變數 myselect...
less基本語法
less的注釋有兩種方式，一種為css用的 這種注釋的方法會被less所編譯成css。另一種為 這種不會被less所編譯 less 會被編譯 不會被編譯css輸出 會被編譯 less中用 變數名 值的方法來生命變數 less test width 100px test color red box c...
Less基本語法的使用方法
編譯less有3種方法 2.node外掛程式編譯 3.瀏覽器編譯 lesss基本語法 less變數 ser width 300px 變數名 值 box 輸出 box less混合 border 輸出 border less混合可帶引數 可多個 border2 border width box2 輸出...