CSS学习笔记:Less

什么是Less?

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

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

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

注释

运算

嵌套

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

变量

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

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

思考:

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

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

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

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

导入

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

导出

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

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

方法一:

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

禁止导出

相关推荐
wljt几秒前
SpringBoot学习笔记五:Spring Boot的web开发
spring boot·笔记·学习
Shadow(⊙o⊙)4 分钟前
C++常见错误解析2.0
开发语言·数据结构·c++·后端·学习·算法
将心ONE8 分钟前
pathlib Path函数的使用
java·linux·前端
lingzhilab9 分钟前
零知派——ESP32-S3 AI 小智 使用 Preferences NVS 实现Web配网持久化
前端
阿亮爱学代码12 分钟前
日期与滚动视图
java·前端·scrollview
Hello_Embed15 分钟前
嵌入式上位机开发入门(二十八):JSON 与 JsonRPC 入门
网络·笔记·网络协议·tcp/ip·嵌入式
欧米欧15 分钟前
STRING的底层实现
前端·c++·算法
U盘失踪了21 分钟前
Playwright codegen脚本录制
笔记
2301_8148098623 分钟前
踩坑实战pywebview:用 Python + Web 技术打造轻量级桌面应用
开发语言·前端·python
LIO26 分钟前
Vue 3 实战——搜索框检索高亮的优雅实现
前端·vue.js