没有找到合适的产品?
联系客服协助选型:023-68661681
提供3000多款全球软件/控件产品
针对软件研发的各个阶段提供专业培训与技术咨询
根据客户需求提供定制化的软件开发服务
全球知名设计软件,显著提升设计质量
打造以经营为中心,实现生产过程透明化管理
帮助企业合理产能分配,提高资源利用率
快速打造数字化生产线,实现全流程追溯
生产过程精准追溯,满足企业合规要求
以六西格玛为理论基础,实现产品质量全数字化管理
通过大屏电子看板,实现车间透明化管理
对设备进行全生命周期管理,提高设备综合利用率
实现设备数据的实时采集与监控
利用数字化技术提升油气勘探的效率和成功率
钻井计划优化、实时监控和风险评估
提供业务洞察与决策支持实现数据驱动决策
翻译|行业资讯|编辑:莫成敏|2019-11-04 14:58:44.843|阅读 209 次
概述:Syncfusion的目标是生产世界级的Windows Forms、ASP.NET以及WPF控件,这些控件使开发者能为要求最苛刻的环境开发高质量软件。在此文章中,阐述了LESS和CSS之间的区别以及LESS与CSS相比的优势。
# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>
Syncfusion的目标是生产世界级的Windows Forms、ASP.NET以及WPF控件,这些控件使开发者能为要求最苛刻的环境开发高质量软件。通过Syncfusion控件,开发人员可以快速而方便地将顶级的功能以及最新的界面添加到.NET应用程序中。
当您遇到奇怪的样式问题时,处理大量普通的CSS可能会很烦人。处理复杂的Web应用程序时,请尽可能保持CSS代码整洁。因此,您需要LESS预处理器来简化工作并节省时间。但是,在开始使用任何预处理器之前,您还应该具有CSS知识并了解其基本体系结构。
在此文章中,阐述了LESS和CSS之间的区别以及LESS与CSS相比的优势。前面已经介绍了一部分内容(点此查看),这是紧接前面文章的后半部分内容~
运作方式
您还可以在LESS中对数值、颜色和变量执行基本的算术运算(例如加、减、除和乘)。
在下面的示例中,我首先定义了静态的宽度和高度变量,然后将.inner-div元素的高度和宽度值分配为其原始值的一半。还通过使用添加操作设置了不同的颜色。
LESS代码
<font style="vertical-align: inherit;"><font style="vertical-align: inherit;">@ base-color:#3FFD45;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> @width:50px;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> @height:50px; </font></font><font></font> <font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> .inner-div {</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> 宽度:@宽度/ 2;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> 高度:@height / 2;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> 颜色:@ base-color +#2EED54;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> } </font></font><font></font>
编译的等效CSS代码
<font style="vertical-align: inherit;"><font style="vertical-align: inherit;">.inner-div {</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> 宽度:25像素;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> 高度:25px;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> 背景颜色:#6dff99;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> }</font></font><font></font>
嵌套
为了在处理大量CSS时使代码更清晰,请使用LESS嵌套功能。您可以通过在另一个选择器中嵌套一个选择器来在分层结构中定义样式表。
在以下示例中,我定义了两个具有不同高度值但背景色相同的div元素。
LESS代码
<font style="vertical-align: inherit;"><font style="vertical-align: inherit;">div {</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> 高度:500像素;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> 背景颜色:#3ffd45;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> 。内{</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> 高度:300像素;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> 颜色:#000000;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> }</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> } </font></font><font></font>
编译的等效CSS代码
<font style="vertical-align: inherit;"><font style="vertical-align: inherit;">div {</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> 高度:500像素;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> 背景颜色:#3ffd45;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> }</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> div .inner {</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> 高度:300像素;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> 背景颜色:#3ffd45;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> 颜色:#000000;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> }</font></font><font></font>
功能
LESS中还提供了预定义的功能,使您可以映射JavaScript代码以操纵值、变换颜色等等。
在以下示例中,我定义了一个div元素,并使用数学颜色运算和颜色定义函数概念对其进行了自定义。
LESS代码
<font style="vertical-align: inherit;"><font style="vertical-align: inherit;">@ base-color:#8765EF;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> @padding:3.5像素;</font></font><font></font> <font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> div {</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> 颜色:变暗(@ base-color,30%);</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> padding-left:圆(@padding);</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> padding-right:圆(@padding);</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> padding-top:ceil(@padding)* 2;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> padding-bottom:ceil(@padding)* 2;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> background-color:rgb(45,100,87);</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> }</font></font><font></font>
编译的等效CSS代码
<font style="vertical-align: inherit;"><font style="vertical-align: inherit;">div {</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> 颜色:#3712a9;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> padding-left:4px;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> padding-right:4像素;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> padding-top:8像素;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> padding-bottom:8px;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> 背景颜色:#2d6457;</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> }</font></font><font></font>
通过使用这些预定义的功能,您可以轻松地从基色中提取颜色,并在整个网页中保持相同的颜色系列。因为它类似于JavaScript,所以此方法使在样式部分中定义逻辑功能变得容易。
结论
市场上还有许多其他预处理器,例如SASS和Stylus。但是,在使用预处理程序之前,应该先掌握CSS的基础知识。CSS和LESS并不是完全不同的,但是LESS确实提供了使您的项目更容易的附加功能。不仅如此,LESS的编译版本是实际的CSS。随时分享您的反馈意见作为对此博客的评论。
Syncfusion提供了大约65个轻量级、模块化、响应式组件,以使Web应用程序开发尽可能容易。从以下列表中查看我们针对不同平台的组件:
相关内容推荐:
Essential Studio:LESS和CSS之间的区别以及LESS与CSS相比的优势(上)
想要购买文中产品正版授权,或了解更多产品信息请点击“咨询在线客服”
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@evget.com
Iron Software 为.NET开发者提供了难得的“即插即用”组件体验,无论是做内部工具,还是开发商业软件,都能大幅提升你的开发效率与产品质量。这款宝藏控件,不妨你也来试试!
TestComplete通过与Git、Jenkins和Zephyr的深度集成,构建了一个完整的持续测试生态系统:从代码变更的智能感知到批量测试的自动化执行,再到测试管理的智能化分析,实现了测试流程的全链路自动化。这种端到端的集成方案不仅显著提升了测试效率和质量,更通过实时反馈和可视化管理,为团队提供了精准的代码质量洞察。
微服务架构带来了灵活性,但也让测试变得复杂:不同协议适配费时费力、服务频繁变更导致测试用例维护困难、依赖环境搭建和稳定更是令人头疼。这些挑战常常成为敏捷交付和质量保障的瓶颈。Parasoft SOAtest正是为应对这些复杂分布式系统测试难题而设计的平台。它通过三大核心能力,帮助团队更从容地驾驭微服务测试:
HOOPS SDK为增材制造软件开发提供了从CAD数据读取、模型处理、可视化到文档生成的完整技术栈。无论是桌面端的工业级打印控制系统,还是基于云的在线制造平台,开发者都可通过HOOPS快速构建稳定可靠、用户体验优良的3D打印软件。
帮您轻松创建商业Web应用程序的ASP.NET界面控件
Essential Studio for Windows Forms功能最全面的Windows Forms界面控件包,帮您创建高性能Windows应用程序
Essential Studio for WPF帮您轻松创建利于分析且高性能Windows应用程序的WPF界面控件
Essential Studio for ASP.NET Core帮您创建在Windows,Linux和Mac上运行的Web应用程序
Essential Studio for ASP.NET MVC帮您轻松创建高性能Web应用程序的ASP.NET MVC界面开发包
服务电话
重庆/ 023-68661681
华东/ 13452821722
华南/ 18100878085
华北/ 17347785263
客户支持
技术支持咨询服务
服务热线:400-700-1020
邮箱:sales@evget.com
关注我们
地址 : 重庆市九龙坡区火炬大道69号6幢
慧都科技 版权所有 Copyright 2003-
2025 渝ICP备12000582号-13 渝公网安备
50010702500608号