less速查手册

注释

/*会同步到css中的注释*/
//不会同步到css中的注释

变量

@color:red; // 定义值
p{
   color:@color;//使用值变量
}
// 变量是有块级作用域的。会写函数就会用
// 变量是延迟加载的。作用域满足的情况下，一个变量定义了两次，会使用最后一个

// 以下定义属性名和选择器不常用
@filed:color;//定义属性名
p{
  @{field}:red;// 使用属性名变量
}

@selector:#id;//定义选择器
@{selector}{// 使用选择器
  xxx;
}

嵌套规则

outer{
  inner1{//这样写inner是outer的子元素，生成outer inner
  }
  &:hover{//加上&符号，直接连接没有空格，生成outer:hover
  }
}

混合：就是抽取公共样式，类似于函数

普通混合：混合也会生成到css文件中（一般不用）

.mixin{// 定义普通混合
    width: 100px;
    height: 100px;
    background-color: pink;
}

div{// 使用普通混合
    .mixin;
}

不带输出的混合，在普通混合的基础上加一对括号

.mixin()// 定义和使用的时候都加括号

带参数的混合：可以使用参数，使用起来像是函数

.mixin(@w, @h, @c){// 定义带参混合
    width: @w;
    height: @h;
    background-color: @c;
}

div{
    .mixin(100px, 200px, black);// 使用带参混合
}

有默认值的混合

不是所有参数都必须有默认值
有默认值的参数放在最后，在调用的时候可以少写那个（看下边示例）
只有两个参数的时候：如果第一个参数定义了默认值，而第二个参数没有定义，那么调用的时候也要写入两个实参。如果反过来，则可以只写一个实参

.mixin(@w:100px, @h, @c:black){// 定义有默认值的混合
    width: @w;
    height: @h;
    background-color: @c;
}

div{
    .mixin(10px, 200px);// 使用有默认值的混合
}

命名参数：只给某几个特定参数赋值

.mixin(@w:100px, @h, @c:black){// 定义混合
    width: @w;
    height: @h;
    background-color: @c;
}

div{
    .mixin(@h:20px,@c:pink);
}

匹配模式

.mixin(@_){// 在调用同名样式的时候，这个也会被调用
    width: 10px;
    background-color: yellow;
}

.mixin(a,@h){ //a和b是当前样式的标识，有点像函数重载
    height: @h;
}
.mixin(b,@h){
    height: @h;
}

div{
    .mixin(a,10px);
}

arguments：（顶替多个连着的参数）

.mixin(@w, @c, @s){
    border: @arguments; // 这里是用@arguments代替了@w @c @s
}

div{
    .mixin(1px, black, solid);
}

import less

定义一个公共common.less。当作一个库来使用

.mixin(){
    width: 10px;
    height: 10px;
    background-color: pink;
}

实际使用中的less

@import "common.less";

div{
    .mixin();
}

继承

less如下

abc{ // 被继承的样式，可以任意起名字，不要和已有的样式冲突
    width: 100px;
    height: 100px;
    background-color: red;
}

div{
    &:extend(abc);
}

生成的css如下，把继承的和被继承的结合在一起，使用的是被继承的样式

.mixin,
div {
  width: 100px;
  height: 100px;
  background-color: red;
}

继承所有，比如伪类等

    &:extend(abc all);  //只需要在继承的时候多加一个all