CSS学习笔记:Less

什么是Less?

Less是一个CSS预处理器, Less文件后缀是.less

扩充了CSS 语言,使CSS具备一定的逻辑性、计算能力

可以通俗地理解:Less是一种更好用的CSS

注释

运算

嵌套

Less嵌套的作用:快速生成后代选择器

变量

**问题引入:**网页中,文字文字颜色基本都是统一的,如果网站改版,变换文字颜色,如何修改代码?

**解决方案:**使用Less变量,把颜色提前存储到一个容器,设置属性值为这个容器名

思考:

我一开始接触到这个方法的时候,觉得这完全没必要啊,直接写pink不是更方便吗?

但是存在即合理,这么写有点类似于C语言的宏定义,类似于后端的解耦合

这样如果后续网页改版,需要把主题色由pink改成green,就只需要修改一次即可

这样一来,代码的可维护性会更高

导入

在Less文件中导入其他的Less文件

导出

Less编译后生成的CSS文件默认在Less文件的同级目录下

如果想改变生成的CSS文件的位置,可使用导出

方法一:

方法二: 注意一定要在第一行添加代码

禁止导出

相关推荐
IT_陈寒24 分钟前
Vite性能优化实战:5个被低估的配置让你的开发效率提升50%
前端·人工智能·后端
IT_陈寒26 分钟前
Java性能调优的7个被低估的技巧:从代码到JVM全链路优化
前端·人工智能·后端
A.A呐34 分钟前
【QT第三章】常用控件1
开发语言·c++·笔记·qt
掘金安东尼1 小时前
前端周刊第439期(2025年11月3日–11月9日)
前端·javascript·vue.js
码农刚子1 小时前
ASP.NET Core Blazor进阶1:高级组件开发
前端·前端框架
鱼鱼块1 小时前
《CSS 核心机制与选择器实战精要》
css
道可到1 小时前
重新审视 JavaScript 中的异步循环
前端
起这个名字1 小时前
微前端应用通信使用和原理
前端·javascript·vue.js
QuantumLeap丶2 小时前
《uni-app跨平台开发完全指南》- 06 - 页面路由与导航
前端·vue.js·uni-app
CSharp精选营2 小时前
ASP.NET Core Blazor进阶1:高级组件开发
前端·.net core·blazor