0 准备

node查看版本：cmd界面：node -v

安装less：npm install -g less

less查看版本：lessc -v

vscode插件：Easy Less

1 使用

1.0 创建文件

• 新建后缀为.less的文件

1.1 变量

• 必须有@为前缀
• 不能包含特殊字符
• 不能以数字开头
• 大小写敏感

@变量名：值
//定义颜色变量
@color: aquamarine;
//定义字体变量
@font14: 20px;
//使用变量
.test{
    background-color: @color;
    font-size: @font14;
}

1.2 less嵌套

1. 子元素样式直接写到父元素中
父元素{
    子元素{ 
    }
}
.test{
    width: 400px;
    height: 400px;
    //1.子元素样式直接写到父元素中
    a{
        color: red;
    }
}
2.伪类、伪元素、交集选择器 在内层选择器前加上&
a{
     color: red;
     //2.伪类、伪元素、交集选择器 在内层选择器前加上&
     &:hover{
         color: black;
     }
}

实际使用：第二种会将父子类样式名连在一起

1.3 less运算

加减乘除及复杂运算

• 运算符号与前后都有空格或者都没有空格，建议都有空格
• 除法应使用./ 或整体加小括号来书写，推荐小括号
• 两个数参与运算，如果只有一个数有单位，则最后的结果就以这个单位为准
• 两个数参与运算，如果两个数都有单位，而且单位不同，则最后的结果以第一个数的单位为准
• 颜色也可以运算

@length: 10px;
.test{
    width: 200px + 200;
    //除法应使用./ 或整体加小括号来书写，推荐小括号
    //less4.0以后不支持/
    //EasyLess随less变化也无法编译/
    height: 600px ./ 2;
    border: (@length/2) solid red;
    font-size: @length*2;
}
.test2{
    width: (@length+10)*10;
    height: @length*10*5;
    border: (@length/2)+3 solid solid #666666 - 666666;//结果#000000
}