LESS常用方法整理

常用方法的整理

官方文档可看https://less.bootcss.com

变量

1.@ 变量声明

@width: 10px;
@height: @width + 10px;
#header { 
    width: @width;
    height: @height;
    @color: red;
    div{
        background:@color; // 输出green
    }
    @color: green;
}

2.$ + 属性名 获取属性值

.block {
  color: red; 
  .inner {
    background-color: $color;  // red
  }
  color: blue;  
}

3.& 代表当前标识的层级

.grand {
  .parent {
    & > & { // & 表示.grand .parent
      color: red;
    }
    
    & & {
      color: green;
    }

    && {
      color: blue;
    }

    &, &ish {
      color: cyan;
    }
  }
}

函数Functions

1.each
参数
list - 遍历对象.
rules - 具体方法

默认参数 value key index（index从1开始）

@set: {
  one: blue;
  two: green;
  three: red;
}
.set {
  each(@set, {
    @{key}-@{index}: @value;
  });
}

参数也可重新申明

.set-2() {
  one: blue;
  two: green;
  three: red;
}
.set-2 {
  // Call mixin and iterate each rule
  each(.set-2(), .(@v, @k, @i) {
    @{k}-@{i}: @v;
  });
}

2.range
参数
start - (可选)开始值
end - 结束值
step - (可选) 间隔值

value: range(4); // 输出 1 2 3 4
value: range(10px, 30px, 10); // 输出 10px 20px 30px

3.extend
.classA:extend(.classB) 表示所有.classB出现的地方都带上.classA
Extend 不能匹配到变量的选择器，如下

.bucket {
  color: blue;
}
.some-class:extend(@{variable}) {} // interpolated selector matches nothing
@variable: .bucket;              

.bucket {
  color: blue;
}
@{variable}:extend(.bucket) {}
@variable: .selector;