LESS

08 May 2018

LESS

LESS 是 CSS 预处理语言，它赋予了 CSS 动态语言的特性，既可以在客户端上运行，也可以在服务端运行。

使用方式

客户端使用

  <link rel="stylesheet/less" type="text/css" href="style.less">

  <script src="less.js" type="text/javascript"></script>

服务端使用 npm install less

相关语法

变量

注意：变量定义的作用域

    @test_width: 300px;

    .box {
        width: @test_width;
    }

混合

    @test_width: 300px;

    .border {
        border: 1px solid pink;
    }

    .box {
        width: @test_width;
        .border;
    }

带参数混合

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

    .test {
        .border_02(30px);
    }

带默认参数混合

    .border_radius(@radius: 5px) {
        border-radius:@radius;
        -moz-border-radius:@radius;
    }

    .test2 {
        width: 100px;
        .border_03();
    }

匹配模式

    .trangle(top, @width:5px, @color:red) {
        border-width: @width;
        border-color: transparent transparent @color transparent;
        border-style: dashed dashed solid dashed;
    }

    .trangle(down, @width:5px, @color:red) {
        border-width: @width;
        border-color: @color transparent transparent transparent;
        border-style: solid dashed dashed dashed;
    }

    .trangle(left, @width:5px, @color:red) {
        border-width: @width;
        border-color: transparent @color transparent transparent;
        border-style: dashed solid dashed dashed;
    }

    .trangle(right, @width:5px, @color:red) {
        border-width: @width;
        border-color: transparent transparent transparent @color;
        border-style: dashed dashed dashed solid;
    }

    .trangle(@_, @width:5px, @color:red) {
        width: 0;
        height: 0;
        overflow: hidden;
    }

    .saojiao {
        .trangle(top, 10px);
    }

运算

    @test_ol: 300px;

    .box-02 {
        width: @test_ol + 20; //可以不写20px
    }

    .box_03 {
        width: (@test_ol + 20) * 30;
    }

嵌套

嵌套越多，匹配越多，尽量少嵌套

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

    .list {
        width: 600px;
        margin: 30px;
        list-style: none;

        li {
            height: 30px;
            line-height: 30px;
            backgroun-color: pink;
        }

        a {
            float: left;
            &:hover {           //&:代表上一层选择器
                color: red;  
            }
        }

        span {
            float: right;
        }
    }

arguments变量

略

其他

避免编译

  .test_03 {
      width: calc(300px - 30px);  //会自动编译
  }

  .test_03 {
      width: ~'calc(300px - 30px);'  //不会编译，原样输出
  }

!important 关键字

  .test_important {
      .list !important;  //一般用于测试
  }

导入文件

  @import "abc.less";   //可省略后缀名
  @import "abc.css";
  @import (less)"a.css";