less样式

less样式常用插件

less样式常用插件easy less(Vscode搜索安装即可)

1.png

配置：
首选项>设置>扩展>Easy less Configuration

2.png

将下面配置添加到setting.json中即可

"less.compile": {
        "compress": true, // true => remove surplus whitespace
        "sourceMap": true, // true => generate source maps (.css.map files)
        "out": true // false => DON'T output .css files (overridable per-file, see below)
      }

less样式使用

// 定义变量 @：值
// 变量使用，@变量名
// 作为变量的一部分使用： @{变量名}
// 当变量重名时，就近使用(前面或者后面)

@b:box5;
@c:orange;
@doc:img;
.@{b}{
    width:100px;
    height:$width;
    background-color: @c;
    background-image: url('../@{doc}/1.jpg');
}

为box4设置一个hover

.box4{
            //  &:hover  为box4设置一个hover
            &:hover{
                background-color: blueviolet;
            }
        }

:extend()对当前选择器扩展 指定选择器的样式(选择器分组)

.box6{
    width: 100px;
    height: 100px;
    background-color: rebeccapurple;
}

// :extend() 对当前选择器扩展 指定选择器的样式(选择器分组)
.box7:extend(.box6){
    background-color: magenta;
}

// .box6() 复制这个样式
.box8{
    .box6();
}

类选择器() 给其他选择器使用

// 类选择器()相当于创建一个minxs,给别的选择器使用
.testStyle(){
    width: 50px;
    height: 50px;
    background-color: cyan;
}

// 混入函数，可传参
.test(@w:100px,@h:200px,@bg-color){
    width: @w;
    height: @h;
    background-color: @bg-color;
}

.box9{
    // .testStyle();
    // 调用混合函数，按顺序传值，写参数名传值
    .test(80px,50px,red);
}

average(red,yellow)等函数

background-color: average(red,yellow);