CSS学习笔记:Less

什么是Less?

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

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

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

注释

运算

嵌套

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

变量

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

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

思考:

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

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

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

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

导入

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

导出

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

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

方法一:

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

禁止导出

相关推荐
abc800211703415 分钟前
前端Bug 修复手册
前端·bug
Best_Liu~18 分钟前
el-table实现固定列,及解决固定列导致部分滚动条无法拖动的问题
前端·javascript·vue.js
_斯洛伐克1 小时前
下降npm版本
前端·vue.js
苏十八2 小时前
前端进阶:Vue.js
前端·javascript·vue.js·前端框架·npm·node.js·ecmascript
st紫月3 小时前
用MySQL+node+vue做一个学生信息管理系统(四):制作增加、删除、修改的组件和对应的路由
前端·vue.js·mysql
乐容3 小时前
vue3使用pinia中的actions,需要调用接口的话
前端·javascript·vue.js
似水明俊德4 小时前
ASP.NET Core Blazor 5:Blazor表单和数据
java·前端·javascript·html·asp.net
至天5 小时前
UniApp 中 Web/H5 正确使用反向代理解决跨域问题
前端·uni-app·vue3·vue2·vite·反向代理
与墨学长5 小时前
Rust破界:前端革新与Vite重构的深度透视(中)
开发语言·前端·rust·前端框架·wasm
十年一梦实验室5 小时前
【C++】相机标定源码笔记- 标定工具库测试
笔记·数码相机