less 项目实战
项目 实战 Less
2023-09-11 14:15:30 时间
1.注释
less 的注释有两种方法,"/**/" 和 "//",前一种会在 css 文件中显示,后一种不会在 css 显示。
2.定义变量的方法:"@"加上变量名。
@tabbarActiveColor:#26a2ff;
3.运算
@height: 30px; height: @height; // 30px line-height: @height - 1; // 29px
4.继承 &
"&"符号,这个符号起到继承的作用,这个符号就是它的父级标签(类,id等等)。
.industry-section { width: 950px; margin-right: auto; margin-left: auto; & > div:not(.heading) { padding: 40px 150px; & h3 { font-size: @fs + 12; margin-bottom: .5rem; } & li { font-size: @fs + 2; line-height: 1.6; } } }
相当于
.industry-section { width: 950px; margin-right: auto; margin-left: auto; } .industry-section > div:not(.heading) { padding: 40px 150px; } .industry-section > div:not(.heading) h3 { font-size: 28px; margin-bottom: .5rem; } .industry-section > div:not(.heading) li { font-size: 18px; line-height: 1.6; }
5.混合
混合可以将一个定义好的class A轻松的引入到另一个class B中,从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用,就像使用函数一样。
classA
.page-width { width: 100%; max-width: 1920px; margin-right: auto; margin-left: auto; }
classB
body { .page-width; // classB font-size: @fs; color: @text-color; background-color: #fff; font-family: "Microsoft Yahei", Arial, sans-serif; }
6.媒体查询
.application-section { max-width: 100%; width: 1920px; height: 770px; margin: 30px auto; background: url(../images/app-scene.png) center top no-repeat; position: relative; & h2 { position: absolute; top: 70px; left: 50%; font-size: 0; width: 1200px; transform: translateX(-50%); @media (max-width: 1600px) { width: 1000px; & span { font-size: @fs + 20; } } } }
7.mixins 混合
// 定义一个样式选择器 .borderRadius(@radius){ -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius; } // 使用已定义的样式选择器 #header { .borderRadius(10px); // 把 10px 作为参数传递给样式选择器 } .btn { .borderRadius(3px);// // 把 3px 作为参数传递给样式选择器 }
默认值
.borderRadius(@radius:5px){ -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius; } .btn { .borderRadius(); }
8.function
less 包含许多内置函数
/*把像素转成rem 375/10 = 37.5 375 它是ipone6的屏幕宽度 注:将屏幕分成10等份,10rem为屏幕宽度 例如: .slide-pages { position: absolute; .bottom(10); .right(15); } */ .fs(@px){ font-size: unit(@px/37.5,rem); } .w(@px){ width: unit(@px/37.5,rem); } .h(@px){ height: unit(@px/37.5,rem); } .lh(@px){ line-height: unit(@px/37.5,rem); } .pl(@px){ padding-left: unit(@px/37.5,rem); } .pr(@px){ padding-right: unit(@px/37.5,rem); } .pt(@px){ padding-top: unit(@px/37.5,rem); } .pb(@px){ padding-bottom: unit(@px/37.5,rem); } .mt(@px){ margin-top:unit(@px/37.5,rem);; } .mb(@px){ margin-bottom:unit(@px/37.5,rem); } .ml(@px){ margin-left:unit(@px/37.5,rem); } .mr(@px){ margin-right:unit(@px/37.5,rem); } .top(@px){ top:unit(@px/37.5,rem); } .bottom(@px){ bottom:unit(@px/37.5,rem); } .left(@px){ left:unit(@px/37.5,rem); } .right(@px){ right:unit(@px/37.5,rem); } .padding(@tb,@lr){ padding: unit(@tb/37.5,rem) unit(@lr/37.5,rem);; } .fl{ float: left; } .fr{ float: right; } .clearfix{ clear: both; }
自定义
variable.less
/*把像素转成rem 375/10 = 37.5 375 它是ipone6的屏幕宽度 注:将屏幕分成10等份,10rem为屏幕宽度 例如: .slide-pages { position: absolute; .bottom(10); .right(15); } */ // 字号 .fs(@px){ font-size: unit(@px/36,rem); [data-dpr='2'] & { font-size: unit(@px/36,rem) * 2; } [data-dpr='3'] & { font-size: unit(@px/36,rem) * 3; } } // 宽度 .w(@px){ width: unit(@px/36,rem); } // 高度 .h(@px){ height: unit(@px/36,rem); } // 行高 .lh(@px){ line-height: unit(@px/36,rem); } // 内边距 .pl(@px){ padding-left: unit(@px/36,rem); } .pr(@px){ padding-right: unit(@px/36,rem); } .pt(@px){ padding-top: unit(@px/36,rem); } .pb(@px){ padding-bottom: unit(@px/36,rem); } .p2(@ptb,@prl){ padding: unit(@ptb/36,rem) unit(@prl/36,rem); } .p3(@pt,@pm,@pb){ padding: unit(@pt/36,rem) unit(@pm/36,rem) unit(@pb/36,rem); } .p4(@pt,@pr,@pb,@pl){ padding: unit(@pt/36,rem) unit(@pr/36,rem) unit(@pb/36,rem) unit(@pl/36,rem); } // 外边距 .mt(@px){ margin-top:unit(@px/36,rem);; } .mb(@px){ margin-bottom:unit(@px/36,rem); } .ml(@px){ margin-left:unit(@px/36,rem); } .mr(@px){ margin-right:unit(@px/36,rem); } .m2(@mtb,@mrl){ margin:unit(@mtb/36,rem) unit(@mrl/36,rem); } .m3(@mt,@mm,@mb){ margin:unit(@mt/36,rem) unit(@mm/36,rem) unit(@mb/36,rem); } .m4(@mt,@mr,@mb,@ml){ margin:unit(@mt/36,rem) unit(@mr/36,rem) unit(@mb/36,rem) unit(@ml/36,rem); } .ma(@mt,@mb){ margin:unit(@mt/36,rem) auto unit(@mb/36,rem); } // 距离 .t(@px){ top:unit(@px/36,rem); } .b(@px){ bottom:unit(@px/36,rem); } .l(@px){ left:unit(@px/36,rem); } .r(@px){ right:unit(@px/36,rem); } // 浮动 .fl{ float: left; } .fr{ float: right; } // 清除浮动 .clearfix{ clear: both; } // 圆角 .br(@px){ border-radius: unit(@px/36,rem); } // 背景 .bs(@width,@height){ background-size:unit(@width/36,rem) unit(@height/36,rem); } .bp(@left,@top){ background-position:unit(@left/36,rem) unit(@top/36,rem); } // 边框 .b(@px,@type,@color){ border: unit(@px/36,rem) @type @color; } /** * 解决1px问题 */ // 顶部 .border-top-1px(@color) { position: relative; &:after { display: block; position: absolute; left: 0; bottom: 0; width: 100%; border-bottom: 1px solid @color; content: ' '; } } // 底部 .border-bottom-1px(@color) { position: relative; &:after { display: block; position: absolute; left: 0; bottom: 0; width: 100%; border-bottom: 1px solid @color; content: ' '; } }
9.继承 extend
.animal{ color: #fff; } /* 语法1:<selector>:extend(<parentSelector>){} */ .bear:extend(.animal){ width: 100px; height: 100px; } /* 语法2:<selector>{ &:extend(<parentSelector>); } */ .deer{ &:extend(.animal); width: 50px; height: 50px; }
10.引入 @import
@import "main.less";
.
相关文章
- 《实战突击:PHP项目开发案例整合(第2版)(含DVD光盘1张)》
- 项目安排
- koa 项目实战(九)passport验证token
- koa 项目实战(八)生成token
- 微信小程序 项目实战(一)生命周期 配置服务器信息 splash启动页
- mmall 项目实战(一)项目初始化
- React Native商城项目实战05 - 设置首页的导航条
- JavaScript - 判断今天是星期几(周几 / 礼拜几),适用于 Vue.js uni-app Nuxt.js 等前端项目
- 精通Python网络爬虫:核心技术、框架与项目实战.1.6 小结
- 精通Python网络爬虫:核心技术、框架与项目实战.3.4 网页分析算法
- 旅游项目实战开发
- 《用于物联网的Arduino项目开发:实用案例解析》—— 2.5 小结
- 《软件测试技术大全:测试基础 流行工具 项目实战(第3版)》—第1章1.2节软件测试的发展
- React Native项目实战之fetch请求
- 《Hadoop海量数据处理:技术详解与项目实战》一 3.2 HDFS读取文件和写入文件
- 【Python】Nuitka打包exe(32位)--防止源代码被反编译--实战PySide2项目--遇坑填坑(图文教程&超详细)
- 项目直播:任务管理系统应用
- 使用idea上传项目到码云(gitee)
- ThinkPHP6项目基操(19.实战部分 Mysql模型事务操作)
- Apple Pay苹果支付IOS in-App Purchase内购项目服务端校验
- 0. 车联网数据平台项目构建指南——MQTT+EMQ+Kafka+KSQL+Tensorflow
- laravel实战化项目之三板斧
- KST-STM32学习之项目实战RGB舞台灯光
- SpringMVC 项目中 创建SpringBoot,使用Hibernate和JPA
- Vue开发实例(03)之Vue项目引入element_ui
- Eclipse+maven 构建第一个简单的springmvc项目