首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >less的基本语法

less的基本语法

原创
作者头像
Java学术趴
发布于 2022-08-15 15:38:36
发布于 2022-08-15 15:38:36
57500
代码可运行
举报
文章被收录于专栏:Java全栈·Java全栈·
运行总次数:0
代码可运行

👨‍🎓作者:Java学术趴 🏦仓库:GithubGitee ✏️博客:CSDN掘金InfoQ云+社区 💌公众号:Java学术趴 🚫特别声明:原创不易,未经授权不得转载或抄袭,如需转载可联系小编授权。 🙏版权声明:文章里的部分文字或者图片来自于互联网以及百度百科,如有侵权请尽快联系小编。微信搜索公众号Java学术趴联系小编。

☠️每日毒鸡汤:这个社会是存在不公平的,不要抱怨,因为没有用!人总是在反省中进步的!

less语法

1 less语法

1.1 less中的变量

使用@来声明一个变量:@color:pink

  • 作为普通属性值来使用:直接使用@pink
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 定义属性值变量,定义变量的时候必须以分号结束,否则找不到该变量
@color:pink;
.myDiv {
  color: @color;
}
复制代码
  • 作为选择器和属性名:#@{selector的值}的形式
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 定义属性名的变量
@m:margin;
.myDiv {
  @{m}: 10px;
}// 定义标签选择器的变量
@selector:warp;
#@{selector} {
  @{m}: 10px;
}.@{selector} {
  @{m}: 10px;
}
复制代码
  • 作为URL:@{url}
  • 变量的延迟加载 : less中的变量都是延迟加载的。
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 变量的延迟加载
@var: 0;
.class {
  @var: 1;
    .brass {
      @var: 2;
      // 如果是顺序执行的,那么此时 size 的值应该是2
      // 但是在less中存在变量的延迟加载,变量的赋值会等作用域中所有的数据加载完毕才会赋值
      // 所以此时这个值就是 3
      size: @var; // 3
      @var: 3;
    }
  size: @var;
}
复制代码

1.2 less的嵌套规则

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// less中的嵌套规则
.myDiv {
  margin: 10px;
  background-color: pink;
  // 基本嵌套,直接在一个标签选择器中嵌套一个新的标签选择器即可
  .myDiv2 {
    margin: 20px;
    background-color: yellow;
    // 不进行嵌套,同级使用,需要使用 & 符号,代表和的意思
    &:hover{
      background-color: aqua;
    }
  }
}
复制代码

1.3 less的混合

  • 混合就是将一系列属性从一个规则集引入到另一个规则集的方式。
1.3.1 普通混合
  • 普通混合 : 混合会被编译到css文件中
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// less混合的基本使用
// 当两个HTML元素中存在多个一致的元素的时候
// 此时就可以定义一个样式规则提供给他们两个使用
// 此时这个混合会被编译到css文件中
.guize {
  background-color: pink;
  font-size: 10px;
  margin: 10px;
}
​
#myDiv {
  .divOne {
    .guize;
  }
  .divTwo {
    .guize;
  }
}
复制代码
1.3.2 不带输出的混合
  • 不带输出的混合:混合不会编译到css文件中
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 给混合加上小括号之后,这个混合就不会被编译到css文件中
.guize() {
  background-color: pink;
  font-size: 10px;
  margin: 10px;
}
​
#myDiv {
  .divOne {
    .guize();
  }
  .divTwo {
    .guize();
  }
}
复制代码
1.3.3 带参数的混合
  • 带参数的混合 : 可以给混合传递变量,并且不会输出到css文件中
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// less可以动态的传递参数
.guize(@w,@h,@c) {
  font-size: @w;
  margin: @h;
  background-color: @c;
}
​
#myDiv {
  .divOne {
    .guize(10px,10px,pink)
  }
  .divTwo {
    .guize(20px,20px,yellow)
  }
}
​
复制代码
1.3.4 带参数并且存在默认值的混合
  • 带参数并且存在默认值的混合:如果不给定实参,那么就会使用默认值,给定实参之后会覆盖默认值。
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// less可以动态的传递参数
.guize(@w:10px,@h:10px,@c:pink) {
  font-size: @w;
  margin: @h;
  background-color: @c;
}
​
#myDiv {
  .divOne {
     // 上边给了默认值这里不给值会使用默认值
    .guize()
  }
  .divTwo {
    // 如果给定了新的实参值,那么会覆盖默认的
    .guize(20px,20px,yellow)
  }
}
复制代码
1.3.4 命名参数
  • 命名参数:指定实参给哪个形参进行赋值,解决当实参和形参的个数不一致的问题。
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// less可以动态的传递参数
.guize(@w:10px,@h:10px,@c:pink) {
  font-size: @w;
  margin: @h;
  background-color: @c;
}
​
#myDiv {
  .divOne {
     // 上边给了默认值这里不给值会使用默认值
    .guize()
  }
  .divTwo {
    // 如果这里的实参只给定一个,那么他会按照顺序进行赋值,也就是把yellow赋值给@w变量
    // 但是我们想把这个颜色赋值给最后的 @c , 所以我们此时使用命名参数
    // 使用命名参数指定将 yellow 赋值给哪个变量
    .guize(@c:yellow)
  }
}

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
为什么国内外PLC厂家选择了Codesys?Codesys可以和西门子博途平分秋色吗?
CODESYS是全球著名的开放性PLC编程系统,类似西门子博途,广泛应用于工厂自动化、汽车自动化、嵌入式自动化、过程自动化、楼宇自动化等领域,该软件由德国CODESYS软件集团开发。CODESYS是IEC61131-3标准的代名词。
剑指工控
2023/08/31
2.5K0
为什么国内外PLC厂家选择了Codesys?Codesys可以和西门子博途平分秋色吗?
汇川VS和利时,谁更有能力挑战西门子?——华为系与院所系在自动化的对决
国内自动化产业按其历史渊源可以大致的分为两个派系,即来自国企高校的院所系与在通用自动化市场摸爬滚打起来的通用系,华为系是自动化通用系的典型代表。院所系主要有来自国企的和利时、高校的浙大中控、科远、稳优等,通用系主要以和华为渊源不浅的汇川技术为代表的一众企业,除了汇川,英威腾、麦格米特都和华为电气有着千丝万缕的瓜葛。
剑指工控
2023/08/31
1.6K0
汇川VS和利时,谁更有能力挑战西门子?——华为系与院所系在自动化的对决
华为走出的国产PLC龙头汇川10年内有望赶上西门子吗?
当年华为卖掉电气事业部错过了与西门子在电气领域交手的机会,这无疑是整个工业界的遗憾。但是华为电气走出的兄弟足够优秀,他们在工业控制各个领域大展风采,让西门子三菱一度头痛。其中最具代表性的是国产PLC龙头汇川技术,汇川由原华为电气产品经理朱兴明创建,2022年汇川营业额超230亿,历史巅峰市值超2400亿,就影响力而言无愧“国产之光”。相信未来汇川能够会成为像德国的西门子、日本的三菱、美国的罗克韦尔一样的全球工业自动化巨头。
剑指工控
2023/08/31
2.4K0
华为走出的国产PLC龙头汇川10年内有望赶上西门子吗?
最牛上市公司创业团体,华为艾默生系,有潜力在工业领域PK西门子
华为艾默生系可谓是把这一点演绎的淋漓尽致。华为电气事业部的市场经理创建了现在名动天下的国产自动化龙头汇川技术,开发经理创建了新能源商用车控制与驱动优秀企业蓝海华腾,研发体系总裁创建了麦格米特,麦格米特是这些企业里面全球化业务最强的。当然,不只它们三个,英威腾、鼎汉科技、三晶电气等20余家上市公司都和这群人有着千丝万缕的联系。
剑指工控
2023/11/15
1.9K0
最牛上市公司创业团体,华为艾默生系,有潜力在工业领域PK西门子
国产自动化品牌全栈自研崛起,自主可控铸就工业安全新基座!
随着全球制造业竞争格局的重构,工业控制系统的自主可控已成为国家安全与产业升级的战略核心。长期以来,PLC、HMI、伺服系统等核心设备被西门子、三菱等外资品牌垄断,据2025年数据显示,国内大中型PLC市场仍有93%以上份额由外资占据。然而,中国自动化品牌正以全栈自研为利刃,撕开外资垄断的壁垒,如汇川技术、信捷电气、维控科技、禾川科技等一批国产企业正形成协同突破之势。
Hello工控
2025/06/13
2400
国产自动化品牌全栈自研崛起,自主可控铸就工业安全新基座!
为什么设备厂喜欢用西门子三菱PLC 而对物美价廉的国产PLC不敏感
尽管这些年国产PLC发展迅速,但是国产PLC对于整个自动化市场而言依然是小众,超过75%以上的市场份额依然被以西门子三菱为首的外资PLC品牌所拥有。那么到底是哪些原因影响了自动化厂商以及设备方的选择?品牌、生态、产品哪个因素最重要?
剑指工控
2023/08/31
5930
为什么设备厂喜欢用西门子三菱PLC  而对物美价廉的国产PLC不敏感
Profinet转Ethercat实现西门子300与汇川PLC与通讯
某国企公司支持国家反制,要求国产化。现场的西门子plc300要与国产品牌汇川的plc,即ethercat通讯,
捷米特研发一部
2025/07/07
1010
Profinet转Ethercat实现西门子300与汇川PLC与通讯
国产两大PLC体系汇川与和利时立体对比
汇川技术与和利时,作为工业自动化领域的两家重要企业,其PLC(可编程逻辑控制器)产品各具特色,各有优势。
科控物联
2024/05/13
2.6K0
国产两大PLC体系汇川与和利时立体对比
ProfiNet转Ethernet/IP工业网关实现选用西门子S7-1500PLC与采用三菱变频器通讯的配置案例
光能行业作为新能源领域的关键分支,近年来发展迅速。在光能转换设备的生产制造过程中,自动化生产线的高效稳定运行至关重要。某光能转换设备生产企业在升级自动化控制系统时,面临着一个棘手的问题:其现有的自动化设备中,部分采用了三菱电机支持Ethernet/IP协议的变频器,而新建的自动化控制系统则基于西门子1500PLC,采用ProfiNet协议进行通信。这两种协议无法直接兼容,导致设备之间无法实现高效的数据交互,影响了生产线的整体效率和智能化水平。为解决这一问题,企业经过多方调研和评估,选择了远创智控的ProfiNet转Ethernet/IP协议转换网关,以实现三菱变频器与西门子1500PLC之间的无缝通信。
远创智控研发一部
2025/06/18
1420
ProfiNet转Ethernet/IP工业网关实现选用西门子S7-1500PLC与采用三菱变频器通讯的配置案例
PLC物联网模块介绍
因工作需要,近期开始组建IOT开发团队,因此近期将有部分IOT相关文章出现。之前的大数据系列,仍然继续下去哦~
软件架构师Michael
2022/07/06
1.9K0
西门子PLC学习笔记二-(工作记录)
本次的项目是对楼宇循环供水的控制,整个项目须要完毕压力、压差、温度等的获取及显示、同一时候完毕电机的控制。
全栈程序员站长
2022/07/13
8210
西门子PLC学习笔记二-(工作记录)
西门子 / 三菱 / 欧姆龙 / 松下 / 台达 PLC 转以太网模块选型指南 | 工业级通讯解决方案
在工业自动化升级浪潮中,老旧工厂里大量服役的 PLC 因缺少网口,成为数字化转型的 “拦路虎”。无论是西门子 S7-200、三菱 FX 系列,还是欧姆龙CP系列,受制于硬件局限,难以直接接入以太网实现远程监控与数据交互。而PLC以太网模块正是破局的关键利器,它以低成本、高适配性的特点,为老设备赋予 “联网新生命”,以下为各主流品牌PLC对应的模块解决方案:
捷米特
2025/06/20
660
西门子 / 三菱 / 欧姆龙 / 松下 / 台达 PLC 转以太网模块选型指南 | 工业级通讯解决方案
国产PLC龙头汇川技术的大招,工业无线通信技术,从模式上颠覆现有工业通信,这次可能真的要遥遥领先了
据可靠信息,国产PLC巨头汇川技术正在对工业无线通信技术进行攻关,并取得显著成果。“汇川改变世界工业的方法并非一味遵循 “先立后破”,有时候要“先破后立”。”
剑指工控
2024/01/29
8780
国产PLC龙头汇川技术的大招,工业无线通信技术,从模式上颠覆现有工业通信,这次可能真的要遥遥领先了
西门子plc485通讯控制变频器_西门子300plc波特率怎么改
CHNetS7-S7300MD用于西门子S7-200/SMART S7-200/S7-300/S7-400/西门子数控840D、840DSL等PLC的以太网数据采集,非常方便构建生产管理系统。 CHNetS7-S7300MD不占用PLC编程口,即编程软件/上位机软件通过以太网对PLC数据监控和采集的同时,触摸屏可以通过扩展RS485口与PLC进行通讯。 CHNetS7-S7300MD支持工控领域内绝大多数SCADA软件,支持西门子S7TCP以太网协议和ModbusTCP协议
全栈程序员站长
2022/11/10
1.3K0
西门子plc485通讯控制变频器_西门子300plc波特率怎么改
为什么说华为成就了我国电力电子产业的半壁江山
2000年左右因为经济危机老任当风头正盛的电气事业部安圣电气卖给了国际电气巨头艾默生。当年国内电信供应商的竞争太激烈了,华为必须集中所有有生力量和对手竞争,尽管华为电气占领了中国市场份额的30%,并且是华为最赚钱的部门。但是在公司大战略下,老任只得忍痛割爱。2001年艾默生花了60亿元买下了安圣电气,让处于风雨飘摇中的华为有了足够的粮草弹药应对市场的变化。
剑指工控
2023/08/31
1.6K0
为什么说华为成就了我国电力电子产业的半壁江山
PROFINET转CANopen协议转换网关实现西门子S7-1200PLC与欧姆龙NJ系列PLC设备之间的通讯
现代仓储行业追求高度自动化,以提高存储和物流效率。在这样的环境中,自动化立体仓库、自动导引车(AGV)系统、智能分拣设备等大量应用。这些设备往往由不同厂商提供,所采用的通信协议各不相同。ROFINET和CANopen作为工业自动化领域广泛使用的两种通信协议,各自具有独特的优势。ROFINET以其高速、实时的通信能力,在构建大型自动化系统中发挥着重要作用;CANopen则因其可靠性和灵活性,在连接分布式设备方面表现出色。然而,当需要将支持ROFINET协议的主站设备与支持CANopen协议的主站设备集成到一个统一的控制系统中时,协议转换成为必要。
远创智控研发一部
2025/06/12
1200
PROFINET转CANopen协议转换网关实现西门子S7-1200PLC与欧姆龙NJ系列PLC设备之间的通讯
实现西门子S7-300PLC经以太网模块与LABVIEW上位机通讯的配置步骤说明
本项目针对某大型汽车制造企业的智能工厂建设需求,构建一套基于工业以太网的能源管理系统,实现对全厂400余台生产设备和动力设施的能耗实时监测、动态分析与优化控制。具体目标包括:
远创智控研发一部
2025/07/02
730
实现西门子S7-300PLC经以太网模块与LABVIEW上位机通讯的配置步骤说明
西门子S7-200 SMART实现OPC通讯的方法
S7-200 PC Access SMART:西门子针对S7-200 SMART PLC和上位机间通信开发的OPC(OLE for Process Control)服务器软件。该软件的主要功能是与标准的OPC客户端进行通信,并交换数据信息。S7-200 PC Access SMART与S7-200 PLC的OPC服务器软件PC Access相似,同样具备OPC客户端测试功能,用户可借此测试配置状况及通信质量。在本文中,S7-200 PC Access SMART简称为PC Access SMART。
自动化大师
2025/05/10
4910
西门子S7-200 SMART实现OPC通讯的方法
西门子S7系列PLC安全防护研究
近年来,随着中国制造的不断崛起,工业控制系统已成为国家关键基础设施的重中之重,工控系统的安全问题也随之而来。工控产品的多样化,造成了工控系统网络通讯协议不同,大量的工控系统采用私有协议,从而导致协议存在缺乏认证、功能码滥用等安全威胁;况且不断被爆出的工控产品漏洞,也难以及时修补等问题。
FB客服
2020/04/07
1.6K0
西门子S7系列PLC安全防护研究
以太网模块应用配置西门子S7-300PLC与力控上位机通讯方案
随着全球对环境保护和可持续发展的重视,新能源汽车行业迎来了飞速发展的机遇。某新能源汽车制造企业为了提升生产效率、优化生产流程以及实现智能化生产管理,决定对其生产线进行升级改造。其中,关键的改造内容之一就是实现生产设备之间的高效数据通信,以便更好地监控生产过程、实时调整生产参数以及进行远程管理。
远创智控研发一部
2025/07/03
710
以太网模块应用配置西门子S7-300PLC与力控上位机通讯方案
推荐阅读
为什么国内外PLC厂家选择了Codesys?Codesys可以和西门子博途平分秋色吗?
2.5K0
汇川VS和利时,谁更有能力挑战西门子?——华为系与院所系在自动化的对决
1.6K0
华为走出的国产PLC龙头汇川10年内有望赶上西门子吗?
2.4K0
最牛上市公司创业团体,华为艾默生系,有潜力在工业领域PK西门子
1.9K0
国产自动化品牌全栈自研崛起,自主可控铸就工业安全新基座!
2400
为什么设备厂喜欢用西门子三菱PLC 而对物美价廉的国产PLC不敏感
5930
Profinet转Ethercat实现西门子300与汇川PLC与通讯
1010
国产两大PLC体系汇川与和利时立体对比
2.6K0
ProfiNet转Ethernet/IP工业网关实现选用西门子S7-1500PLC与采用三菱变频器通讯的配置案例
1420
PLC物联网模块介绍
1.9K0
西门子PLC学习笔记二-(工作记录)
8210
西门子 / 三菱 / 欧姆龙 / 松下 / 台达 PLC 转以太网模块选型指南 | 工业级通讯解决方案
660
国产PLC龙头汇川技术的大招,工业无线通信技术,从模式上颠覆现有工业通信,这次可能真的要遥遥领先了
8780
西门子plc485通讯控制变频器_西门子300plc波特率怎么改
1.3K0
为什么说华为成就了我国电力电子产业的半壁江山
1.6K0
PROFINET转CANopen协议转换网关实现西门子S7-1200PLC与欧姆龙NJ系列PLC设备之间的通讯
1200
实现西门子S7-300PLC经以太网模块与LABVIEW上位机通讯的配置步骤说明
730
西门子S7-200 SMART实现OPC通讯的方法
4910
西门子S7系列PLC安全防护研究
1.6K0
以太网模块应用配置西门子S7-300PLC与力控上位机通讯方案
710
相关推荐
为什么国内外PLC厂家选择了Codesys?Codesys可以和西门子博途平分秋色吗?
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验