less的使用方法
步骤一:定义- - - @变量名: 变量值;
步骤二:使用- - - 属性名: @变量名;
eg: myless.less文件:
@color: pink;
div {
width: 100px;
height: 100px;
background-color: @color;
}
p {
background-color: @color;
}
html页面不能直接使用less文件,要先转化成css文件,再使用
less编译成css方法
Visual Studio Code中,下载插件 “Easy LESS”,下载后重启Visual Studio Code,将less文件保存后,会自动生成对应的css文件
myless.less文件生成的css文件如下:
less 运算
注意事项:
1.可以在less里面写:加(+)、减(-)、乘(*)、除(/) 运算
2.运算符两边要用一个空格隔开,eg: 6px + 6
3.对于两个不同单位的值之间的运算,运算结果的值的单位取第一个值的单位,eg: 20rem / 5px 得到 4rem
4.如果两个值之间只有一个值有单位,则运算结果就去改单位,eg: 6px + 2 得到 8px
注意:less除法(/)运算时,最外面要加上括号,eg: (320px / 15)