.less檔案:
/*這句注釋會被編譯進css*/
//這句注釋不會編譯進css
/*引入其它的less檔案*/
@import "v.less";
/*變數*/
@bgc: yellow;
#div1
/*常用的數值計算函式*/
@num1 : 100;
@num2 : 20.3px;
@num3 : 32.2px;
@num4 : 44.4px;
@num5 : 0.5;
@num6 : -55;
@color: #ff0000;
@bgcolor : #00ff00;
#div1_5
#div2
/*樣式的巢狀寫法*/
.ul1
a a:hover
}}/*mixin*/
.defaultborder(@width: 10px, @style: solid, @color: red)
.defaultradius(@radius)
.box
/*條件判斷when*/
.area(@width) when(@width <= 200px)
.area(@width) when(@width > 200px)
@media screen and (max-width: 200px)
}@media screen and (min-width: 201px)
}/*loop 估計用不到*/
.widthfun(100);
.widthfun(@n, @i:10) when (@i <= @n)
.widthfun(@n,(@i+10))
}/*上面這段loop程式設計成css:*/
width-10
width-20
width-30
width-40
width-50
width-60
width-70
width-80
width-90
width-100
/*less的匹配模式(類似函式過載) 此處用方向不同的樣式三角形舉例*/
.sanjiao(down ,@w: 100px, @c:#ff6600)
.sanjiao(top ,@w: 100px, @c:#ff6600)
.sanjiao(left ,@w: 100px, @c:#ff6600)
.sanjiao(right ,@w: 100px, @c:#ff6600)
#tranigle
/*less中的論據---直接使用函式預設數值*/
.border111(@s: solid, @c :#ff6600, @h:10px)
/*less中免編譯*/
.w1/*less中的important*/
.sss
.box222
.temp
編譯成的.css檔案：
/*這句注釋會被編譯進css*/
/*引入其它的less檔案*/
/*變數*/
#div1
/*常用的數值計算函式*/
#div1_5
#div2
/*樣式的巢狀寫法*/
.ul1
.ul1 li
.ul1 a
.ul1 a:hover
.ul1 a:hover:hover
/*mixin*/
.box
/*條件判斷when*/
@media screen and (max-width: 200px)
}@media screen and (min-width: 201px)
}/*loop 估計用不到*/
width-10
width-20
width-30
width-40
width-50
width-60
width-70
width-80
width-90
width-100
/*上面這段loop程式設計成css:*/
width-10
width-20
width-30
width-40
width-50
width-60
width-70
width-80
width-90
width-100
/*less的匹配模式(類似函式過載) 此處用方向不同的樣式三角形舉例*/
#tranigle
/*less中的論據---直接使用函式預設數值*/
/*less中免編譯*/
.w1
/*less中的important*/
.sss
.box222
.temp
less使用總結
15年自學了 less 可是一直沒用，就忘記了。後來抱著提高 css 開發速度的目的，又去學習了 less 學完馬上用，效果立竿見影，記得也牢了。剛開始學習前，我們總會問自己乙個問題，學習它有什麼用。就拿這個 less 來說，學習它有什麼用，分明就有了 css 用來編寫樣式，我還要花時間來研究 le...
Less 使用 經驗總結
案例一 cons 80px myloop counter,i 0 when i counter out ptzcontrol over myloop counter,i 1 next iteration myloop 9 生成的css檔案如下 用sublime的less2css外掛程式自動生成的 s...
學習總結 LESS的使用
1 編譯工具 koala 2 語法 1 2種注釋方式 注釋內容 注釋內容 這種方法不會編譯到css檔案中 2 變數寫法 變數名 值 例如 parameter 10px 3 樣式巢狀樣式 例如 style1 style2巢狀進.style1裡面，被.style1使用 style2 ul li巢狀在ul...