less的语法和使用

less

参考

基础语法：
变量、混合(Mixins)、运算、函数、作用域、嵌套规则、

变量

  • [x] @
1
2
3
4
5
6
@color: '#000';
@url: 'img/swiper';
.box {
    background: color(@color); 
    background: url('@{url}/bg1.jpg') no-repeat;
}

混合

  • [x] 基础用法：征用:把原有的样式克隆拿过来用,

    • [ ] 加()

    • 不被编译,可传参

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      .public() {
          width: 100px;
          height: 100px;
      }
      .box1 {
          .public;
      }
      //结果
      .box1 {
        width: 100px;
        height: 100px;
      }
- [ ] `不加()`
- 当做样式给元素用
- 当做方法被别的方法征用


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.public {
    width: 100px;
    height: 100px;
}
.box1 {
    .public;
}
//结果
.public {
  width: 100px;
  height: 100px;
}
.box1 {
  width: 100px;
  height: 100px;
}

  • [x] extend : 公用:和原来的选择器公用一套样式

  • 需原来的选择器不加括号 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.public {
    width: 100px;
    height: 100px;
}
.box2 {
    &:extend(.public);
}
.box3:extend(.public) {}
//结果
.public,
.box2,
.box3 {
  width: 100px;
  height: 100px;
}

  • [x] 命名空间和作用域

    • 类似js中规则
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
          @num:1;
      .box{
        @num:10;
        &:hover{
          z-index:@num;
        }
      }
      // 结果
      .box:hover {
        z-index: 10;
      }

  • [x] !important

    • IE中兼容性使用–各种样式中，你想让谁的优先级高时使用
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      .public() {
        width: 100px;
        height: 100px;
        .link {
          width: 200px;
          height: 200px;
        }
        &:hover {
          background: #EEE;
        }
      }
      .box {
        .public !important; 
        // 把public及子孙元素的样式都继承!important过来
      }
      // 结果：
      .box {
        width: 100px !important;
        height: 100px !important;
      }
      .box .link {
        width: 200px !important;
        height: 200px !important;
      }
      .box:hover {
        background: #EEE !important;
      }

  • [x] 参数 : 设定形参数

    • [ ] arguments

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      .transition(@property: all;@duration: 1s;@function: linear;@delay: 0s;) {
          transition: @arguments;
          -webkit-transition: @arguments;
          -moz-transition: @arguments;
          -ms-transition: @arguments;
          -o-transition: @arguments;
      }
      .box1 {
          .transition;
      }
      //结果
      .box1 {
          transition: all 1s linear 0s;
          -webkit-transition: all 1s linear 0s;
          -moz-transition: all 1s linear 0s;
          -ms-transition: all 1s linear 0s;
          -o-transition: all 1s linear 0s
      }
- [ ] **返回值**：执行方法后再执行其变量相当于返回值


1
2
3
4
5
6
7
8
.public(@x, @y) {
    @result: @x+@y;
}
.box {
    .public(10, 20); 
    z-index: @result;
}

  • [x] 条件

    • [ ] 常用的条件运算符：>、>=、<、<=、=；

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      .public(@x) when (@x<10) and (@x>0) {
          background: red;
      }
      .public(@x) when (@x>=10) {
          background: green;
      }
      .public(@x) when (@x<=0) {
          background: blue;
      }
      .box {
          .public(8);
      }
      //结果 
      .box {
          backg round: red
      }

    • [ ] 常用的IS函数：iscolor、isnumber、isstring、iskeyword、isurl、ispixel、ispercentage…

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      .public(@x) when (iscolor(@x)) {
          background: red;
      }
      .public(@x) when (isnumber(@x)) {
          background: green;
      }
      .box {
          .public(#123234);
      }
      // 结果
      .box {
          background: red
      }

循环嵌套（递归）

  • 应用于多栏布局栅格系统
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.public(@n,@i:1) when (@i<=@n) {
  .box-@{i} {
    & when (@i=1) {
      width: 100px;
    }
    & when (@i=3) {
      width: 300px;
    }
    & when (@i=2) {
      width: 200px;
    }
    & when (@i=4) {
      width: 400px;
    }
  }
  .public(@n, @i+1);//递归调用，类似for循环中i++
}
//调用
.public(4);//或者.public(@n:4);

通过+、+_属性融合到一起

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.transform(@v:1) {
  -webkit-transform+_: scale(@v);
}
.box {
  .transform(1.5);
}
.box2 {
  .transform(1.5);
  -webkit-transform+_: rotate(45deg);
}
// 结果
.box {
    -webkit-transform: scale(1.5)
}
.box2 {
    -webkit-transform: scale(1.5) rotate(45deg)
}

连字符

  • [x] 多个&

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    .box {
        width: 100px;
        height: 50px;
        & &-top {
            font-size: 15px;
        }
    }
    //结果
    .box {
        width: 100px;
        height: 50px
    }
    .box .box-top {
        font-size: 15px
    }

  • [x] 1个&

  • [x] 使用&倒置（不常用）

导入

  • (reference) 不编译公共库内的方法
    1
    2
    3
    4
    5
    6
    @import (reference) "common";
    .box {
        .center; //公共方法
        width: 100px;
        height: 100px;
    }