less用法

首先下载node，然后全局安装less ：npm i -g less

然后在某个目录下面copy这段代码，命名为index.less：

然后在目录下面cmd运行  lessc index.less index.css      即可看见编译后的css文件的效果；

1.变量；

2.混合；

3.嵌套；

...

n.循环

// 1.-------------------------------变量----------
@w: 10px;
@h: @w+10px;

.d1 {
    width: @w;
    height: @h;
}

// 2.-------------------------------混合----------
.public {
    border: 1px solid;
}

.d2 {
    .public()
}

// 3.-------------------------------嵌套----------
.d3 {
    width: 30px;

    .d3 {
        width: 20px;
    }

    &:hover {
        width: 40px;
    }
}

// 4.-------------------------------@规则嵌套和冒泡----------
// @support判断浏览器是否支持该属性 @media判断浏览器当前比例用来响应式
.d4 {
    width: 30px;

    @media (min-width:300px) {
        width: 600px;

        @media (min-resolution: 192dpi) {
            background: red;
        }
    }

    @media (min-width: 1280px) {
        width: 800px;
    }
}

// 5.-------------------------------运算----------
// 乘法和除法一部分情况下不做转换
.d5 {
    width: 5px + 6px;
    height: 5px * 5;
    background: #222444 + #222;
    border-radius: 100% - 20%;
}

// 6.-------------------------------变量转义----------
@min768: ~"(min-width: 768px)";

.d6 {
    @media @min768 {
        font-size: 1.2rem;
    }
}

// 7.-------------------------------函数-太多了----------
// https://less.bootcss.com/functions/#less-%E5%87%BD%E6%95%B0

@base: #f04615;
@width: 0.5;

.d7 {
    width: percentage(@width); // returns `50%`
    color: saturate(@base, 5%);
    background-color: spin(lighten(@base, 25%), 8);
}

// 8.-------------------------------命名空间和访问符----------
.d8() {
    .d8 {
        border: 1px solid red;
        width: 10px;
    }
}

.dd8 {
    .d8.d8()
}

// 9.-------------------------------映射----------
.d9() {
    primary: blue;
    danger: red;
}

.d9 {
    background: .d9[primary]
}

// 10.-------------------------------作用域----------
@var: red;

.d10 {
    @var: blue;

    .a10 {
        color: @var;
    }

    @var: yellow; //✔

}

// 11.-------------------------------引入，没有文件会报错，注释一下----------
// @import "library"; // library.less
// @import "typo.css";

// 12.-------------------------------循环----------
@selectors: blue, green, red;

each(@selectors, {
        .sel-@{value} {
            color: @value;
        }
    }

);

// ----
@set: {
    color: blue;
    background: green;
    border-color: red;
}

.set {
    each(@set, {
            @{key}: @value;
        }

    );
}

// ----设置变量名
.set-2() {
    one: blue;
    two: green;
    three: red;
}

.set-2 {
    each(.set-2(), .(@v, @k, @i) {
            @{k}-@{i}: @v;
        }

    );
}

// 创建循环-------好用
each(range(2,4), {
        .col-@{value} {
            height: (@value * 50px);
        }
    }
);
each(range(4), {
    .col1-@{value} {
        height: (@value * 50px);
    }
}
);