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