less

变量

// 定义
@color: blue;
//使用
body {
    background-color: @color;
}

变量名 @ 前缀 , 不能有特殊字符, 数字不能开头 , 区分大小写字母

编译

安装 vscode 插件 Easy LESS , 保存后自动将 less 文件编译成 css

嵌套

.header{
    color: red;
    a {
        color: blue;
        &:hover {
            color: yellow;
        }
    }
}

伪类伪元素加 & 符号去空格;

运算

div {
    width: 200px - 50;  // 150px
    height: (200px * 2) - 10  // 390px
}

运算符两侧必须敲一个空格

两个数参与运算, 如果只有一个数有单位. 最后结果就以这个单位为准

两个数参与运算, 如果两个数都有单位, 并且是不一样的单位, 以第一单位为准