Less 是一個Css 預編譯器,意思指的是它可以擴充套件Css語言,新增功能如允許變數(variables),混合(mixins),函式(functions) 和許多其他的技術，讓你的Css更具維護性，主題性，擴充套件性。

Less 可執行在 Node 環境,瀏覽器環境和Rhino環境.同時也有3種可選工具供你編譯檔案和監視任何改變。

使用

1.使用koala軟體，實時將.less檔案轉換為.css檔案
2.在.html檔案中使用link引入生成的.css檔案
3.在.less檔案中@charset"utf-8";

特性

變數
@變數名=屬性；

@test_width：100px;
.box{
  width:@test_width;
}
 

混合

.box{
  width:100px;
  .border
}
.border{
  border: solid 1px pink;
}

混合 --帶引數

.border_02(@border_width){
  border:solid yellow @border_width;
}
.test_hunhe{
    .border_02(10px);
}

混合 --預設帶參

.border_03(@border_width:10px){
  border:solid 1px @border_width;
}
.test_hunhe_03{
  .border_03();
}
 

匹配模式

.triangle(top,@w:1px,@c:#ccc){
  border-width:@w;
  border-color:transparent transparent @c transparent;
  border-style:dashed dashed solid dashed;
}
下面@_表示匹配結果怎樣都會帶上下面的樣式
.triangle(@_,@_w:10px:@_c:#ccc){

}

匹配模式 -定位

 .pos(r){
    position:relative;
  }
  .pos(a){
    position:absolute;
  }
  .pos(f){
    position:fixed;
  }
  .pipei{
    width:200px;
    height:200px;
    background-color:green;
    .pos(a);
  }
 

運算

@test_width:200px;
.box{
  width:@test_width+20;
}
或
@test_width:200;
.box{
  width:@test_width+20px;
}

巢狀

儘量減少匹配層數
.list{
  li{
  }
  a{
    &：hover{
        }
  }
}

@arguments 代表所有傳遞進來的引數

.border(@w:10px,@c:teal,@xx:solid){
   border:@arguments;
}

避免編譯

@min768: ~"(min-width: 768px)";
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

！important關鍵字

會為所有混合帶有的樣式，新增上!important
  例如：
  test_important{
   .border_03() !important;
  }