一、 什么是Less.css

Less.css是一種動態樣式語言，屬于CSS預處理語言的一種，它使用類似CSS的語法，為CSS的賦予了動態語言的特性，如變量、繼承、運算、函數等，更方便CSS的編寫和維護。
Less.css可以在多種語言、環境中使用，包括瀏覽器端、桌面客戶端、服務端。
官網地址

二、 編譯工具

1. Koaloa編譯：國人開發的LESS/SASS編譯工具。
2. Nodes.js庫
3. 瀏覽器端使用

三、 Less中的注釋

1. 可以使用CSS中的注釋（//）—— 是會被編譯**的，即在.css文件中可見
2. 也可以用//注釋 —— 不會被編譯的，不會再.css中保留
   //編譯的時候會自動過濾掉
   聲明編碼格式，防止亂碼@charset "utf-8";

四、 變量

Less中聲明變量用@開頭
less中，想聲明變量的話，一定要用@開頭 例如:@變量名：值

@test_width:300px;
@test_height:300px;
.box{
  width: @test_width;
  height: @test_height;
  background-color: red;
}

五、 混合 (Mixin)

混合(mixin)變量
例： .border{border:10px solid red;}
帶參數的混合
.border-radius(@radius){css代碼}
可設默認值
.border-radius(@radius:5px){css代碼}
目的：以前寫的（之前定義過的）樣式拿過來重用

.border{
  border:5px solid pink;
}
.box{
  width: @test_width;
  height: @test_height;
  background-color: red;
  .border;
}
.box2{
  .box;//用.box的用樣式
  margin-left: 100px;
}

混合可帶參數

.border_02(@border_width){
  border: @border_width solid green;
}
.test_hunhe{
  .border_02(30px);
}

混合_帶默認值

.border_03(@border_width:10px){
  border: @border_width solid yellow;
}
.test_hunhe_03{
  .border_03();
}
.border_radius(@radius:5px){
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}
.radius_test{
  width: 200px;
  height: 200px;
  background-color: yellow;
  .border_radius(20px);
}

六、 匹配模式

相當于js中的if，但不完全是；得滿足條件后才能匹配

.sanjiao{
  width: 0;
  height: 0;
  overflow: hidden;//用來處理ie6最小高度問題
  border-width: 10px;
  border-color:transparent  transparent  red  transparent;//上面紅色
  border-style: dashed  solid  dashed  dashed;//在ie6下有個黑色的邊，解決方案，哪個方向有顏色哪個方向是solid,其他的是dashed
}

匹配模式

.triangle(top,@w:5px,@c:#ccc){
  border-width: @w;
  border-color:  transparent  transparent  @c  transparent;
  border-style: dashed  dashed  solid  dashed;
}
.triangle(bottom,@w:5px,@c:#ccc){
  border-width: @w;
  border-color:@c  transparent  transparent  transparent;
  border-style: solid  dashed  dashed  dashed;
}
.triangle(left,@w:5px,@c:#ccc){
  border-width: @w;
  border-color: transparent @c transparent transparent;
  border-style:  dashed solid dashed  dashed;
}
.triangle(right,@w:5px,@c:#ccc){
  border-width: @w;
  border-color: transparent transparent transparent @c;
  border-style:  dashed dashed  dashed solid;
}

無論選擇誰都得帶上我，即使不選啥

.triangle(@_,@w:5px,@c:#ccc){
  width: 0;
  height: 0;
  overflow: hidden;
}
.sanjiao_02{
  .triangle(right,@w:50px);
}

匹配模式的定位

.pos(r){
  position: relative;
}
.pos(a){
  position: absolute;
}
.pos(r){
  position: fixed;
}

七、 運算

任何數字、顏色或者變量都可以參與運算預算應該被包裹在括號中

@test_01:300px;
.test_01{
  width: @test_01  +  20px;//只有有一個人帶單位就可以
  height: @test_01  -  20 * 5;
  position: absolute;
  left:(@test_01 + 20)*3;
  color: #ccc - 10;//less會轉化為255,然后輸出
}

八、 嵌套規則

兩種用法
&對偽類的使用 — hover或 focus
&對連接的使用— &_nav
正常我們寫css的時候

.list{}
.list li{}
.list li a{}
.list li span{}

用了css之后我們就這樣寫

.list{
  width: 600px;
  list-style: none;
  margin: 30px auto;
  overflow: hidden;
  li{
    height: 30px;
    line-height: 30px;
    background-color: aqua;
    margin-bottom: 5px;
    /*a{
      float: left;
    }*/
    //嵌套層數越多，匹配的次數就越多，盡量少嵌套一些東西
  }
  a{
    float: left;
    &:hover{
      //&代表上一層選擇器,&=a ;若父級是.title ,子級是.title_nav = &_nav
      color: red;
      background-color: blue;
    }
  }
  span{
    float: right;
  }
}

九、 @arguments

@arguments包含了所有傳遞進來的參數。
如果你不想單獨處理每一個參數的話就可以像這樣寫
原來的辦法傳參

.border_arg(@w:30px,@c:red,@xx:solid){
  border: @w @c @xx;
}

現在的利用argguments

.border_arg(@w:30px,@c:red,@xx:solid){
  border: @arguments;
}
.test_arguments{
  .border_arg();
}
.test_arguments_2{
  .border_arg(40px);
}

十、 避免編譯

有的時候我們需要輸出一些不正確的CSS語法或者使用一些LESS不認識的專有語法
要輸出這樣的值我們可以在字符串前加上一個~

例如：width:~’calc(100% - 30px)’;
.test_03{
  width: calc(300px - 20px);
}
.test_04{
  width: ~'calc(300px - 20px)'; //想不讓less算，讓瀏覽器算  用在calc 或者濾鏡
}

十一、 !important 關鍵字

回味所有混合所帶來的樣式，添上!important
調試的時候加，平時用的時候最好不要加

.test_important{
  .border_radius() !important;
}
====

十二、 其他的常用東西

定義清浮動方式

.clearFix{
  &:after{
    content: "";
    display: block;
    clear: both;
  }
  zoom: 1;
}
.list{
  .clearFix;
}

ie6下需要將img的border:none；
定義浮動

.fl(@fl:left){
  float: @fl;
  display: inline;//解決ie6下雙邊距
}
.fr(@fr:right){
  float: @fr;
  display: inline;
}
.list{
  .clearFix();//這樣的方式是為了區分less還是css
}

引入外部的文件(一些庫或公共的)

.less文件引入
@import "base"; 默認后綴名是.less所以不用寫
.css文件引入
@import(less) "a.css"; //注意(less)有空格，貌似我沒用出來有待研究