編譯器

• koala 編譯器

  • 創(chuàng)建一個 style 文件夾，在其中創(chuàng)建 .less 文件厚脉，將文件夾拖入 koala 編譯器

    koala 編譯器

  • .less 文件上 -- 右鍵 -- 設置輸出路徑
    

    normal 不壓縮 / compress 壓縮

  • 在 html 文件中引用時還是引用 .css 的文件
    <link rel="stylesheet" href="less/test.css">

• Node.js

• 瀏覽器端

用法

• 注釋：

    //  編譯后不會保留
    /*  編譯后會被保留  */  
  

• 變量

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

• 混合

     // .less
    .box{
        width:@test_width;
        height:@test_width;
        background-color: yellow;
        .border;               // 看這行
    }
    .border{
        border:10px solid red;
    }
    //  編譯后
    .box {
      width: 300px;
      height: 300px;
      background-color: yellow;
      border: 10px solid red;     // 把 .border 合并到了 .box 中
    }
    .border {
      border: 10px solid red;
    }
  

  // 帶參數(shù)的樣式宪郊，：后是默認值
  .border_02(@border_width:30px){
      border:@border_width solid blue;
  }
  

• 匹配模式

    // 匹配模式
    .triangle(@_){        // .triangle 的公用樣式
        width:0px;
        height:0px;
        overflow: hidden;
    }
    .triangle(top,@w:50px,@c:#ccc){
        border-width:@w;
        border-color: transparent transparent @c transparent;
        border-style: solid;
    }
    .triangle(bottom,@w:50px,@c:#ccc){
        border-width:@w;
        border-color: @c transparent transparent transparent;
        border-style: solid;
    }
  
    .sanjiao{    // html 標簽的類名
        .triangle(bottom);     // 如果匹配名打錯赘来，則只匹配 .triangle(@_)
    };
  

• 運算魄咕，保證運算符前后留有空格胧弛，不然有時候會出錯

    @width_02:200px;
  
    .calc{
        width:(@width_02 - 20) * 5;      //  900px
        color:#ccc - 50;      // color: #9a9a9a;
    }
  

• 嵌套

  • 后代元素：直接寫在父元素內(nèi)

    // less
    .init{
        height:100px;
        width:100px;
        background-color: red;
        margin:10px;
    }
    section{
        background-color: blue;
        div{
            .init
        }
    }
  
    // css
    section div {
      height: 100px;
      width: 100px;
      background-color: red;
      margin: 10px;
    }
  

  • 子元素：寫在父元素內(nèi)，&>xxx 通過 & 來表示上一級楚殿。也可以配合偽類使用撮慨，例如： &:hover

    // less
    section{
        background-color: blue;
        &>div{
            width:20px;
            height:20px;
            background-color: red;
        }
        &:hover{
            background-color: yellow
        }
    }
  
    // css
    section > div {
      width: 20px;
      height: 20px;
      background-color: red;
    }
    section:hover {
      background-color: #ffff00;
    }
  

• arguments

    .border_03(@width:5px,@style:solid,@color:black){
        border:@arguments;
    }
  

• 避免編譯：通過 ~'樣式' 實現(xiàn)

  // less
    .calc{
        width:~'calc(300px - 30px)';
        height:calc(300px - 30px)
    }
  
  // css
    .calc {
      width: calc(300px - 30px);
      height: calc(270px);
    }
  

• !important 加在 less 樣式中，使得所有編譯后的樣式都帶有 !important