less基本用法

h5页面使用
// vscode安装easy less插件
// html页面引入less转换后css文件
变量
// @变量名value;

// 必须@为前缀
// 区分大小写
// 不能数字开头
// 不能包含特殊字符

@color: blue;

p {
    color: @color;
}
嵌套
ul {
    li {
        color: red
    }
}

ul li {
  color: red;
}
&符号
// 内层选择器的前面没有&符号，则被解析为父选择器的后代
// 如果有&符号，则被解析为父元素自身

p {
   color: blue;

&:hover {
     color: red
   }
}

.header p {
  color: blue;
}
.header p:hover {
  color: red;
}
运算
// 加 + 减 - 乘 * 除 /
// 运算符两侧必须含一个空格隔开
// 两个数参与运算 只有一个数有单位 最后以这个单位为准
// 两个单位不同 以第一个单位为准

@fs: 15px;

html {
    font-size: @fs; // 15px
}

p {
    font-size: @fs - 2; // 13px
    width: 30rem / @fs; // 2rem
}
导入
@import ‘index.less’;
vscode插件
// easy less
// 编译目录下less文件为css