less使用小結

一、關於變量

   less中的變量要使用@xxx聲明。

變量的使用方式

1.作爲普通的變量

比如
@color:red;
使用的話就在css中
div{
   background-color:@color;
}

2.作爲選擇器或屬性名，要用@{變量名}這種形式

比如有一個div
<div class="width"></div>
定義一個變量
@mydiv:width;
@{mydiv}{
   @{mydiv}:200px;
}
編譯後css爲
.width{
   width:200px;
}

3.作爲URL

另外，less變量的特性：1.延遲加載   2.當有多個相同的變量名時，使用最後一個。

二、混合，所謂混合，就是一種將一個規則集引入另一個規則集的方式

  1.普通混合

定義一個混合集

.font_h{
   color:red;
}
h1{
   font-size;30px;
   .font_h();
}
編譯後
h1{
   font-size:30px;  
}

  2.不帶輸出的混合，就是當你在一個css樣式中引入一個混合集，卻又不想改混合集輸出到css樣式中去渲染，可以在該混合集後加一個()

.font_h{
   color:red;
}
h1{
   font-size:30px;
   .font_h();
}
編譯後
h1{
  font-size:30px;
}

3.帶選擇器的混合

.hover-mixin{
  &:hover{
     border:1px solid #ff0000;
  }
}
bottom{
   .hover-mixin();
}
編譯後
bottom:hover{
   border:1px solid #ff0000;
}

4.帶具有默認值參數的混合

.maxin(@color:blue){
   border:1px solid @color;
}
div{
  .maxin();
}
使用的時候應該傳一個色值進去，如果沒有參數，就使用默認值blue

5.帶多個參數的混合，同上面，不過多個參數之間用分號相隔

6.匹配模式，在傳值的時候定義一個字符，使用的時候使用哪個字符就調用哪條規則。

.color(r,@color:red){
  color:@color;
}
.color(b,@color:blue){
  color:@color;
}
.color(g,@color:green){
  color:@color;
}
h1{
  .color(r)
}
編譯後
h1{
  color:red;
}

三、嵌套，模仿了HTML結構，是代碼更加簡潔

四、父元素選擇器符號&。表示當前選擇器的所有父選擇器

   如果將&放到當前選擇器之後，就會當前選擇器插入到所有父選擇器之前

   &&組合使用可以生成所有可能的選擇器列表

五、運算功能 任何數值 顏色 變量都可以計算

六、函數。less內部封裝了很多函數可以調用

七、作用域。同js編程語言的作用域概念很像，不過less是在父作用域尋找變量。

八、條件表達式

   1.比較運算符：>,<, <=, >=, = ,true

比如
#layout(@name){
  & when(@name=header){
     height:60px;
  }
}

  2.類型檢查函數：iscolor, isnumber, isstring, iskeyword, isurl等。

  3.單位檢查函數：檢查一個值除了是數字，是否是一個特定的單位。

   ispixel, ispercentage , isem, isunit等。

九、循環，混合可以調用自身，結合條件表達式，就可以寫出循環。

.loop(@counter)when(@counter>0){
   .loop(@counter-1);
    width:(10px*@counter);
}
div{
  .loop(5)
}
編譯後
div{
   width:50px;
   width:40px;
   width:30px;
   width:20px;
   width:10px;
}

十、合併屬性 + 

  只要在需要合併的屬性的：前面加上 + 號即可。

  合併以逗號,分隔屬性

可以使用+_分隔所有合併的屬性。