关于less的知识点

1.下载依赖less和less-loader 或者在创建项目时选定
npm install less@3.9.0 -g
npm install less-loader@4.1.0 -g
注意版本信息：在package.json文件中可查看

文章图片

备注：卸载方法 npm uninstall less
2.检查是否安装成功
lessc -v
3.成功

文章图片

4.引用

5.使用

less中允许以变量的形式来定义，定义：@x:xx; 使用：@x;

@color:red; @x:100px; .home{ width:@x; height: @x; background: @color; }

效果：

文章图片
多层嵌套+变量计算

@x:120px; .home{ width: @x; height:@x; background: red; .box1{ width: @x/2; height:@x/2; background: green; .box2{ width: @x/3; height:@x/3; background: blue; } } }

效果：

文章图片
混合=函数

//定义一个函数； .test(@color:red,@size:14px){ background: @color; font-size: @size; } //不传参，使用默认的； .box1{.test()} // 给函数传参； .box2{.test(@color:green,@size:30px)} //修改一个参数 .box3{.test(@color:#46ff17)}

效果：

文章图片
可以对高度、宽度、角度进行计算
@k:20px; ul{ list-style: none; li{ border:1px solid ; margin:10px 0 ; } li:nth-child(1){ width: @k; height:@k; } li:nth-child(2){ width: @k + @k; height:@k; } li:nth-child(3){ width: @k * 2; height:@k; } }
【关于less的知识点】效果：

文章图片

关于less的知识点

推荐阅读

汽车积碳是什么意思

redis多节点同步

27岁有稳定工作,想用20万存款当做第二职业来投资,投资什么好呢？

上海戏剧学院分数线 2019年上海戏剧学院分数线

去加拿大必买清单去加拿大买什么最划算

室内阳台养什么花最好室内阳台适合养什么花好

火理财什么时间可以申请债权转让？债权转让收费吗

塑料菜板发黑怎么办

癌细胞|癌细胞已经转移，为什么人的精神依旧很好，而且很能吃？是好事？

详细步骤及注意事项 g2810加墨水后如何操作

佳能相机7100 佳能7100单反

有什么好看的书推荐？

你喜欢看军事小说吗？

空气阻尼器时间继电器空气阻尼器结构图

2023春节坐高铁需要全程戴口罩吗 2021春节能坐高铁吗

台高官被问“你有接受过性招待吗

农村籍独生子女补贴如何领取？四类人无法领取有你吗？

甲氰菊酯有效是多久甲氰菊酯药效是几天，水里多久失效

c语言连接数据库函数 c语言数据库连接池

有宠app怎么关闭资讯推送通知？有宠app关闭资讯推送通知的方法