LESS 学习笔记

编译器

• koala 编译器

  • 创建一个 style 文件夹，在其中创建 .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;
    }
  

  // 带参数的样式，：后是默认值
  .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;
    }
  

• 嵌套

  • 后代元素：直接写在父元素内

    // 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;
    }
  

  • 子元素：写在父元素内，&>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;
    }
  

• 避免编译：通过 ~'样式' 实现

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

• !important 加在 less 样式中，使得所有编译后的样式都带有 !important