css進階成預編譯less語法規則

解決第一個問題，怎麼能讓代碼中不出現重複項，比如一個主色，到處寫？

1、變量

less中可以設置變量，然後引用使用

舊：

a{
color:#000
}
b{
color:#000
}
c{
color:#000
}

less:

@maincolor:#000;
a{
color:@maincolor
}
b{
color:@maincolor
}
c{
color:@maincolor
}

這樣的話，只需要更改參數maincolor就可以實現主題色切換了，其實寫代碼的人基本上都不會像出現複製粘貼的情況，所以變量很有必要。

 

解決第二個問題，一個樣式塊重複調用，同樣，作爲一個寫代碼的，我是不允許你複製粘貼的，所以使用

2、混合模式

2.1，直接引入他！

如果有一個常用項，很多都要用比如：

.b{
border-bottom:1px solid #000
}

.a{
color:#888;
border-bottom:1px solid #000
}

.c{
color:#222;
border-bottom:1px solid #000
}

a、c都重複調用了b的樣式，所以不要複製粘貼，就是這樣

less

.b{
border-bottom:1px solid #000
}

.a{
color:#888;
.b
}

.c{
color:#222;
.b
}

額，是的就是這麼簡單，相當於把b當成了一個方法直接引入即可，是的我說的是方法，沒說是變量，原因是什麼的，就是他丫的還能傳參數！！！

繼續看！

如果a、c也是引用border-bottom，但是可能大家的某個參數不一樣，比如顏色對吧，那b就不能用了，除非b裏面的參數，讓你自定義，好的，他來了，他來了！！

 

2.2 帶參數的混合

.b(@color){
bottom-border:1px solid @color
}

.a{
color:#000;
.b(#656)
}

.c{
background-color:#999;
.b(#999)
}

看到了，b的樣子是不是像極了方法。

既然他像方法了，那麼你一定能想到

 

2.3 帶默認值的混合

是的，方法的化，當然可以設置默認值啦

.b(@color:#456){
bottom-border:1px solid @color
}

.a{
color:#000;
.b()
}

.c{
background-color:#999;
.b(#999)
}

b裏面有默認值，a裏面可以不傳，那就調用默認的，c裏面同樣可以上傳你要的顏色

 

 

變量有了，方法有了，怎麼會沒有選擇分支結構呢？來吧if else大法！

 

3、匹配模式

用法類似於if -else

比如，在寫css的時候，會存在針對一個dom我寫多個樣式，比如，一個是隻改顏色，一個是該背景色，一個是改邊框

這樣的話，只要給對應dom添加不用class就可以實現不同效果

css

.a1{
color:#000;
}
.a2{
background:#000;
}
.a3{
border:1px solid #000;
}

b{
a1
}

這樣的話看起來不錯了，b調用不同的a，但是我覺得還不夠，因爲a1、a2、a3都是b的可用樣式，其實都是給b準備的，b只需要選擇即可，是不是有點if  else的感覺了

less

.a1(top,@w:5px,@c:#000) {
  border-width: @w;
  border-color: @c;
}

.a1(bottom,@w:10px,@c:#fff) {
  border-width: @w;
  border-color: @c;
}
//這個A1比較特殊，@_代表不管你選擇哪一個a1都會帶上這個a1的樣式
.a1(@_,@w:15px,@c:#777){
  border-width: @w;
  border-color: @c;
}
.a2{
  .a1(top,100px,#345);
}

這裏面a2  傳入不同的第一個參數，top、bottom 就可以調用不同的a1,if-else或switc-case附體了吧。

 

還有一個點就是@__這個就默認你選擇誰都會調用，額使用場景你動下腦子吧。

 

4、嵌套結構

好了，上面兩個其實都是讓你少寫重複樣式，這樣其實你就可以在寫之前，把要用的樣式否單獨寫出來，在針對每個dom去調用

 

但是，css還有一個惡魔的重複，就是層級遞進

 

css

：

<div class="list">
<ul>
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
</ul>
</div>


<style>
.list{}
.list ul{}
.list ul li{}
.list ul li a{}
</style>

則會中如果結構比較深，這個重複寫啊！

 

所以來看less的嵌套！

 

<div class="list">
<ul>
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
</ul>
</div>


<style>
.list{
   color:#000;
   ul{
     color:#999
     li{
       width:10px
       a{
          display:block
        }
     }
   }
 }
</style>

好啦！，你看到了，就是按照他的html結構寫進去就可以了，代碼量減少了好多的。

 

最後。less是不能直接用到html中的，建議使用koala 編譯即可。