登录
原创

样式编写-less

发布于 2021-06-04 阅读 75
  • 前端
  • CSS
原创

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文件

image.png

myless.less文件生成的css文件如下:

image.png

less 运算

注意事项:
1.可以在less里面写:加(+)、减(-)、乘(*)、除(/) 运算
2.运算符两边要用一个空格隔开,eg: 6px + 6
3.对于两个不同单位的值之间的运算,运算结果的值的单位取第一个值的单位,eg: 20rem / 5px 得到 4rem
4.如果两个值之间只有一个值有单位,则运算结果就去改单位,eg: 6px + 2 得到 8px

注意:less除法(/)运算时,最外面要加上括号,eg: (320px / 15)

评论区

零00
2粉丝

时光荏苒,我自清欢

0

0

0

举报