关于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; } } }
效果:
文章图片
- 混合=函数
我是box1 我是box2 我是box3//定义一个函数; .test(@color:red,@size:14px){ background: @color; font-size: @size; } //不传参,使用默认的; .box1{.test()} // 给函数传参; .box2{.test(@color:green,@size:30px)} //修改一个参数 .box3{.test(@color:#46ff17)}
效果:
文章图片
- 可以对高度、宽度、角度进行计算
- {{item}}
【关于less的知识点】效果:
文章图片
推荐阅读
- 热闹中的孤独
- JAVA(抽象类与接口的区别&重载与重写&内存泄漏)
- 放屁有这三个特征的,请注意啦!这说明你的身体毒素太多
- 一个人的旅行,三亚
- 布丽吉特,人生绝对的赢家
- 慢慢的美丽
- 尽力
- 一个小故事,我的思考。
- 家乡的那条小河
- 《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量