Less基础

Less(Leaner Style Sheets)

它是一门CSS预处理语言，在CSS的语法基础上，引入了变量,Mixin,运算以及函数等功能，大大简化了CSS的编写，并且降低了维护成本。

• Less变量

  • 变量命名规范：必须有@为前缀，不能包含特殊字符，不能以数字开头，大小写敏感。
  • 语法: @变量名: 值;

• Less编译

  • vscode插件

• Less嵌套

  • 如果遇到(交集|伪类|伪元素选择器）
    • 内层选择器的前面没有&符号，则被解析为父选择器的后代；
    • 如果内部有&符号，就被解析为父元素自身或父元素的伪类。
  • 嵌套语法:

#header {
    .logo {
       width: 300px;
    }
}

• Less运算
  • (+ - * /)
  • 注意：
    • 乘号和除号的写法；
    • 运算符中间左右应有个空格隔开1px + 5；
    • 对于两个不同单位的值之间的运算，运算结果取第一个值的单位；
    • 如果两个值之前只有一个值有单位，则运算结果就取该单位。