less的使用幾個技巧

1.層級關系

讓這個box范圍內的全部包進來，這樣的話就完美的進行調節，再也不用到處找第幾行第幾個，我剛才在哪個位置給覆蓋了。一看便知！

.box{
        width: 100%; height: 300px; p{ margin: 10px; span{ padding: 10px; a{ list-style: none; &:nth-child(1){ } } } } }

 

2.主色調的使用

小米諾基亞等公司，都有自己的主色調。如果每次加一個#e23615太麻煩，而且如果諾基亞要搞活動！過年要換成紅色！你完了。。。你做了無數個background和font-color。此時less解決了這個問題

@bg-color: #000; @ft-color: #e1e1e1; .bg-color { background: @bg-color; color: @ft-color; padding: 8px 25px; }

 

3.拿他當函數用

比如說我在box1中用了很多漂亮的樣式，在box2中想使用，但必須把他們的10行樣式全復制過來，多次使用很麻煩。怎么辦？這次拿他當函數，
第一種：最簡單，放進去就行

.x{
    background: #000; width: 300px; height: 100px; } .box { .x; border:1px solid #ccc } //相當於這樣，而且能多次使用！ //再也不用擔心我的學習，步步高打火機，哪里不會點哪里 .box { background: #000; width: 300px; height: 100px; border:1px solid #ccc } 

第二種：當函數來回調，自己這個顏色我不確定怎么辦，木有關系
*@color 就是 function(a) 里面的a，可以瞎起名
*@color 可以放默認值懶得動，也可以放全新的顏色。

.x(@color){
 background:@color;
 border:1px solid @color } .x(@color:#ccc){ background:@color; border:1px solid @color } .box { .x(#000); display:flex; } //相當於到一個地方，換一個主題。再也不用擔心我的學習

 

4.一個class有N個方案

比如說這個class叫kings
我給他做出了4種主題，各種大小完全不同。此時我總不能起名叫
kings1，kings2，kings3吧
首先把所有方案排列出來！然后box來顯示。
相當於電視機，你放N個台自己選哪個電視劇

• @_ 其實是默認的意思，你什么都不加空着就這樣
• 你要加a或b或c就另一種方案

.king(@_, @width:1px, @height:1p, @bg:#fff) { width:@width; height:@height; background:@bg; } .king(a, @width:100px, @height:100p, @bg:#000) { width:@width; height:@height; background:@bg; } .king(b, @width:200px, @height:200p, @bg:#f88) { width:@width; height:@height; background:@bg; } .king(c, @width:300px, @height:300p, @bg:#0000CC;) { width:@width; height:@height; background:@bg; } .box{ .king(a) } 

 

5.簡單的計算器

基本的加減乘除在這里可以使用
而且過程中不用擔心用不用加px rem
在a里加就行了

@a:100px;

.box{
 width:(a/2)+3-5*2;
}

 

6.arguments的使用

其實他就是用來 五馬分屍的。
比如border的分布:由數字，樣式，顏色拼出來。
border: 1px solid #ccc
有沒有什么辦法用一個就KO掉？那就是arguments

.bor(@a:1px, @b:solid, @c:#000) { border:@arguments } .box1{ .bor(); } .box2{ .bor(20px, dashed, #ccc); }