Less

变量

@styleBaseUrl: "../style";
@imgBaseUrl: "../img";

@c: color;
@color: red;
@divName: myDiv;

@primary: green;
@secondary: blue;

@var: @a;
@a: 9%;

@import "@{styleBaseUrl}/themes.less";

#@{divName} {
    background-@{c}: @color;
    background: url("@{imgBaseUrl}/logo.PNG");
    
    @myColor: primary;
    .element {
        # 使用@myColor存primary名称，@@myColor === @primary
        color: @@myColor;
        
        # 变量不用在使用前声明且有作用域，取当前或父的最后一个值，这里编译后width: 100%
        width: @var;
        @a: 100%;
        
        # 可以使用$将属性做为变量取值，取值与变量规则一样，$color === 下面的color === red
        background-color: $color;
        color: red;
    }
}

父选择器

.button { 
    color: blue; 
    &:hover { 
        color: green; 
    }
    # &Ok === .buttonOk
    &Ok { 
        background-image: url("ok.png"); 
    }
    .a {
        # .myA & === .myA .button .a
        .myA & {
            color: red;
        }
    }
}

p, a {
    # & + & === p + p, p + a, a + p, a + a
    & + & {
        color: red;
    }
}

扩展( === 匹配到的选择器,待扩展的选择器 {} )

.box.b {
    color: green;
}
.b{
    .x {
        color: red;
    }
    .y & {
        color: blue;
    }
}

# 两种都是只扩展.b和.c到自己
# 只能匹配到一致的选择器，伪类顺序不同无法匹配，*.b和*.c也无法匹配到。如果只是引号不同可匹配到
.a:extend(.b, .c) {}
.a {
    &:extend(.b, .c);
}
# 扩展.b所有实例，例如.box.b和.b .x和.y .b
.a:extend(.b all) {}
# 扩展.b .x
.a:extend(.b .x) {}
# 扩展.y .b
.a:extend(.y .b) {}
# 待扩展的元素可用变量，选择器中不可用变量
@{variable}:extend(.bucket) {}
.some-class:extend(@{variable}) {}   # 无法匹配

# @media声明中的:extend只会匹配同一媒体声明中的选择器
# 最外层扩展匹配所有内容，包括嵌套媒体中的选择器

Merge

# + 用逗号分割，+_ 用空格分隔
.mixin() { 
    box-shadow+: inset 0 0 10px #555; 
    transform+_: scale(2);
} 
.myclass { 
    .mixin(); 
    box-shadow+: 0 0 20px black;
    transform+_: rotate(15deg);
}
# Outputs
.myclass { 
    box-shadow: inset 0 0 10px #555, 0 0 20px black; 
    transform: scale(2) rotate(15deg);
}

函数 API查阅 Less 函数手册
混合

.a {
    border-top: dotted 1px red;
}

# 对混合进行分组(命名空间)，参数用逗号或分号分开，建议分号。
# 形参如果没有给默认值，实参需要传对应个才可匹配上
.b(@c: #000; @w: 1px; param3: 1,2,3; @other...) {
    # @other是传入的实参去掉前三个，@arguments是所有实参
    .x {
        color: @c;
        width: @w
    }
    
    # 通过.b(red, 2px)[@result] 取出@result值
    # 如果写.b(red, 2px)[]，则取得最后一个属性/变量 值
    @result: (@w * 2);
}

#header {
    .bordered();
    # 下面四种作用相同
    .b > .x();
    .b .x();
    .b.x();
    
    .b();
    .x();
    
    # 批量增加!important
    .b.x() !important;
}

# 判断有when和when not，多个判断可以用and与,(or的意思)连接。
# 当命名空间有保护，下面两种作用相同。(循环可以通过判断+递归实现)
#namespace when (@mode = huge) { 
    .mixin() { /* */ } 
} 
#namespace { 
    .mixin() when (@mode = huge) { /* */ } 
}

# 循环
.loop(@counter) when (@counter > 0) { 
    .loop( (@counter - 1) ); 
    width: (10px * @counter);
}

import

# 导入关键字可以多个，用,分割。

# reference: 使用Less文件但不输出
# inline   : 在输出中包含源文件但不处理它
# less     : 无论文件扩展名如何，都将文件视为 Less 文件
# css      : 将文件视为 CSS 文件，无论文件扩展名是什么
# once     : 只包含一次文件，默认
# multiple : 多次包含文件
# optional : 找不到文件时继续编译

@import (optional, reference) "foo.less";

@plugin

# my-plugin.js 下面两种作用相同
registerPlugin({ 
    install: function(less, pluginManager, functions) { 
        functions.add('pi', function() { 
            return Math.PI; 
        }); 
    } 
})
module.exports = { 
    install: function(less, pluginManager, functions) { 
        functions.add('pi', function() { 
            return Math.PI; 
        }); 
    } 
};

# my-less.less
@plugin "my-plugin"; 
.show-me-pi { 
    value: pi();
}