less語法及使用介紹

less

less是一種動態樣式語言，屬於css預處理器的範疇，它擴展了 CSS 語言，增加了變量、Mixin、函數等特性，使 CSS 更易維護和擴展。

LESS 既可以在 客戶端 上運行 ，也可以藉助Node.js在服務端運行。

less中的註釋

以//開頭的註釋，不會被編譯到css文件中；

以/**/包裹的註釋會被編譯到css文件中。

less中的變量

使用@來聲明一個變量，如：

@myColor：pink; 
@m: margin; 
@url:img/1.png;

注意：

• less中的變量是塊級作用域生效！

• 在作爲屬性值使用時直接 background: @myColor 即可。

• 如果該變量是用作屬性名，則加上大括號：@{m}:10px。

• 如果該變量作爲url，也要加上大括號：background:url(@{url})。

• 在less中變量是延遲加載的，比如.demo{@var:1; two:@var; @var:2;}最終two的值爲2，因爲變量延遲加載，等到加載var時，下面的聲明覆蓋了上面的聲明。

less中的嵌套規則

1. 基本嵌套規則

   .wrap{
       color:blue;
       .inner{
           color:red;
       }
       &:hover{
           color:pink;
       }
   }

   最終的效果是：

   .wrap{color:blue}
   .wrap .inner{color:red}
   .wrap:hover{color:pink}

2. &的使用

   如上面例子所示，&可以表示平級的選擇器，不讓其變成子級。

   ​
   ​

less中的混合(mixin)

混合就是將一系列屬性從一個規則集引入到另一個規則集的方式。

1. 普通混合，這樣的混合less，編譯後公共的部分依舊存在css中。

   .myStyle{
       position:absolute;
       left:0;
       right:0;
       top:0;
       bottom:0;
       margin:auto;
   }
   .inner1{
       .myStyle;
   }
   .inner2{
       .myStyle;
   }

2. 不帶輸出的混合，將變量轉換成類似函數的方式，公共部分不會輸出。

   .myStyle(){
       position:absolute;
       left:0;
       right:0;
       top:0;
       bottom:0;
       margin:auto;
   }
   .inner1{
       .myStyle;
   }
   .inner2{
       .myStyle;
   }

3. 帶參數的混合，可以進一步抽取出屬性值，便於統一設置。

   .myStyle(@w,@h){
       position:absolute;
       left:0;
       right:0;
       top:0;
       bottom:0;
       margin:auto;
       width:@w;
       height:@h;
   }
   .inner1{
       .myStyle(100px,100px);
   }
   .inner2{
       .myStyle(200px,200px);
   }

4. 帶參數並且有默認值的混合，指定了默認值後可以不傳參數。

   .myStyle(@w:100px,@h:100px){
       position:absolute;
       left:0;
       right:0;
       top:0;
       bottom:0;
       margin:auto;
       width:@w;
       height:@h;
   }
   .inner1{
       .myStyle();
   }
   .inner2{
       .myStyle(200px,200px);
   }

5. 命名參數，可以傳入指定的屬性值。

   .myStyle(@w:100px,@h:100px){
       position:absolute;
       left:0;
       right:0;
       top:0;
       bottom:0;
       margin:auto;
       width:@w;
       height:@h;
   }
   .inner1{
       .myStyle();
   }
   .inner2{
       .myStyle(@h:200px);
   }

6. 使用@import分離和引用，更好的提高複用性。

   //在my.less文件中定義好：
   .myStyle(@w:100px,@h:100px){
       position:absolute;
       left:0;
       right:0;
       top:0;
       bottom:0;
       margin:auto;
       width:@w;
       height:@h;
   }
   
   //在其他less中引用：
   @import "./my.less";
   .inner{.myStyle()}

7. 匹配模式，可以解決一些比較複雜的複用需求。

   //比如畫三角形：要能夠傳入參數，控制它的朝向，高，顏色。
   
   .triangle(@_,@w,@c){
       width:0px;
       height:0px;
   }
   .triangle(L,@w,@c){
       border-width:@w;
       border-color:transparent @c transparent transparent;
   }
   .triangle(R,@w,@c){
       border-width:@w;
       border-color:transparent transparent transparent @c;
   }
   .triangle(T,@w,@c){
       border-width:@w;
       border-color:transparent transparent @c transparent;
   }
   .triangle(B,@w,@c){
       border-width:@w;
       border-color:@c transparent transparent transparent;
   }
   
   //L/R/T/B是自己定義的標識符，在傳入參數的時候可以指定匹配的mixin
   //如果有同名的mixin，且標識符參數是@_，那麼不管匹配哪個都會將其也包括進去
   
   .demo{.triangle(R,40px,red)}

8. arguments變量，用的較少。

   .myStyle(@1,@2,@3){
       border:@arguments;
   }
   .demo{.myStyle(1px,solid,red)}

less運算

在less中可以進行加減乘除的運算，只需要一方帶單位即可。

width:(100+100px)

less中避免編譯

.myStyle{
    padding:~"calc(10px + 10px)";//這樣less不會對引號中內容進行編譯
}

//css中的結果：
.myStyle{
    padding: calc(10px + 10px); //因爲瀏覽器本來就支持這種屬性值
}

less繼承

.myStyle{
    border: 1px solid red;
}
.myStyle.test{
    background:red;
}
.myStyle:hover{
    background:green;
}

//繼承
#wrap{
    width:100px;
    height:100px;
    .inner{
        //加上all代表.myStyle的所有狀態都繼承
        &:extend(.myStyle all); 
        &:nth-child(1){}
        &:nth-child(2){}
    }
}

性能比混合高，可以將編譯成的css文件中重複的樣式進行合併。

但靈活度比混合低，不能傳入參數。