less安装

通过npm安装less

新建终端，输入：npm i -g less

vscode中安装一个Easy Less插件可以自动编译less文件到css文件中；

一、less中的变量声明和注释

//的注释是不会被编译到css中展示的，/**/的注释是会被编译到css中去的，简单了解一下就号

 

使用@来声明一个变量； 如：@color:pink

1.作为普通属性值使用时，直接使用@color就可以使用pink色

2.选择器或者属性名作为变量时,

如 ：@m:margin ,在使用时应使用语法糖 @{m}:0 ==> margin:0;

        @selector:#id; 在使用时 使用 @{selector} {style类型} ==> #id{}

3.less中的变量是延时加载；（less中的变量都是具有块级作用域的）

@var:0;
.class {
@var:1;
    .brass {
        @var:2;
        three:@var;//==>3 ；这是延时加载，在本身的作用域中所有变量加载完毕再读取
        @var:3;//
    }
    one:@var; // ==> 1;
}

二、less中的嵌套规则

1.& 符号的使用 可以是的选择器平级，简单来说就是去除空格，不再是后代选择

 在:hover前面加上&之后的变化

 三、less中的混合方法

1.无参数方法 

2.默认参数方法