less基础与使用

less就是一门css预处理语言，扩展了css的动态特征。

less的使用：less文件的后缀名是 .less 

less变量

变量是指没有固定的值可以改变的，

定义语法 ：  @变量名：值；

必须以@开头，变量名不能包含特殊字符，不能以数字开头，大小写敏感，使用直接给属性使用。

// 定义
@color: pink;
 // 使用 
div{
    background-color: @color;
}

less编译

less包含一个自定义的语法及解析器，用户根据这些语法自定义自己的样式规则，这些规则要先通过解析器编译成对应的css文件。这样html文件才能使用。（可以用插件自动编译为css，vscode中的Easy LESS插件，保存后自动编译为css文件并创建保存。）

less嵌套

子元素样式直接嵌套到父元素内部

// 定义
@color: pink;
div{
// 使用
    background-color: @color;
    a{
        color: aqua;
    }
}

 如果遇见交集、伪类、伪元素等，就需要使用 & 符号

less的内层选择器的前面没有&符号则被解析为父选择器的后代，如果有&符号则被解析为父元素自身或者父元素的伪类。

// less中    
a{
        color: aqua;
        &:hover{
            color: antiquewhite;
        }
    }
// css中编译为
a:hover {
  color: antiquewhite;
}

less运算

less里任何颜色数字或者变量都可以进行运算，有加 + 减 - 乘 * 除 / 运算符。

// 例如 less中
@border: 10px + 10;

注意：

• 运算符左右两侧必须有空格隔开。
• 有两个数参与运算，如果只有一个数有单位，最后结果就以这个单位为准。
• 如果有两个单位，且单位不同时：则最后的单位以第一个单位为准。

颜色中包含数字也可以参与运算。还可以使用（）。

更多可见 Less 中文网 (lesscss.cn)