less的使用

变量及映射

@primary-color: white;
#colors() {
    primary: pink;
    danger: red;
    warning: orange;
}
// 变量及映射的使用
.div {
    color: @primary-color;
    background-color: #colors[primary];
}

混合

参数可以用，分隔也可以用；分隔，但是使用方案的时候不能用；分隔

/* 类似函数重载，根据传的参数的数量使用不同的函数 */
.theme(@color,@bg) {
    color: @color;
    background: @bg;
}
.theme(@fontSize) {
    font-size: @fontSize;
}
/* 混合参数默认值，不传参数的时候默认该值，该函数有重载的时候慎用 */
.bg(@bg:#f5f5f5) {
    background: #bg;
}
/* 混合的使用 */
.div {
    .theme(#fff,#f5f5f5);
    .theme(@bg:#f5f5f5, @color:#fff) /* 如果参数顺序打乱的话加上命名空间可以给对应的参数赋值 */
}

方案

函数重载在参数数量相同的时候是实现不了的，这时候可以使用 方案 来实现函数重载的效果

/*　方案的定义 */
.case(@_, @bg:#f5f5f5) {　/* 默认方案 */
    background: @bg;    
}
.case(a, @bg:#ffffff) { /* 方案a */
    background: @bg;
}
.case(b, @color:#ffffff) { /* 方案b */
    color: @color;
}
/* 方案的使用 */
.div {
    .case() /* 使用默认方案 */
    .case(a) /* 使用方案a */
}

命名空间

#bundle() {
    .button {
        display: block;
        border: 1px solid black;
        background-color: grey;
        &:hover {
            background-color: white;
        }
    }
    .tap {}
}
/* 把.button混合到.div中 */
.div {
    color: orange;
    #bundle.button();  /* 还可以书写为 #bundle > .button 形式 */
	#bundle().button(); /* 如果不想要像 #bundle .tap 这样的出现在css中就在命名空间后面加上() */
}

when条件判断和循环

/* 先看看when的使用 */
.color(@width) when(@width <= 100) {
    color: blue;
}
.color(@width) when(@width > 100) {
    color: red;
}
.div {
    .color(100); //这里color为blue
    .color(200); //这里color为red
}

/* 循环是在when的基础上使用的 */
.widthFun(@n, @i:100) when(@i <= @n) {
    .widthFun(@n, (@i + 100));
    .width-@{i} { /* @{i}表示这个变量的值 */
        width: 1px * @i;
    }
}
.widthFun(500)
/* 上面的会被编译成 */
.width-100 {width: 100px}
.width-200 {width: 200px}
.width-300 {width: 300px}
.width-400 {width: 400px}
.width-500 {width: 500px}

写法技巧

/*
		转义
*/
@min768： ~"(min-width: 768px)"; /*从less3.5开始可以简写为 @min768: (min-width: 768px)*/
.div {
    @media @min768 {
        font-size: 1.2rem;
    }
}
.div {
    /* border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; 这里50% / 60%会被计算成0.8333333%显示在样式中*/
    border-radius: ~"50% 50% 50% 50% / 60% 60% 40% 40%;" /*所以这种情况要用到转义符*/
}

/*
		&的用法
*/
.a {
    &:hover {} /* & 映射为parent的名字，从而使用伪类选择器 */
}

.button {
    &-ok {}; /* 解析成 .button-ok 。如果有跟parent重复的class名字，可以使用&代替 */
    &s {}; /* 解析成 .buttons */
}

.a {
    .b {
        .c & {} /* 通过 & 追加父元素的属性。用来写不同类里面的相同属性 */
    }
}
/* 上面的会被编译成 */
.a .b {}
.c .a .b {}

/*
		!important
*/
.a {
    color: red;
    font-size: 20px;
}
.div {
    .a !important; /* 每个a中的属性都会被编译成!important */
}