CSS学习笔记:Less

什么是Less?

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

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

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

注释

运算

嵌套

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

变量

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

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

思考:

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

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

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

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

导入

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

导出

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

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

方法一:

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

禁止导出

相关推荐
东锋1.34 分钟前
使用 F12 查看 Network 及数据格式
前端
zhanggongzichu6 分钟前
npm常用命令
前端·npm·node.js
anyup_前端梦工厂13 分钟前
从浏览器层面看前端性能:了解 Chrome 组件、多进程与多线程
前端·chrome
安冬的码畜日常18 分钟前
【Vim Masterclass 笔记22】S09L40 + L41:同步练习11:Vim 的配置与 vimrc 文件的相关操作(含点评课内容)
笔记·vim·vim配置·vim同步练习·vim options·vim option-list
chengpei14721 分钟前
chrome游览器JSON Formatter插件无效问题排查,FastJsonHttpMessageConverter导致Content-Type返回不正确
java·前端·chrome·spring boot·json
五味香23 分钟前
Java学习,List 元素替换
android·java·开发语言·python·学习·golang·kotlin
我命由我1234530 分钟前
NPM 与 Node.js 版本兼容问题:npm warn cli npm does not support Node.js
前端·javascript·前端框架·npm·node.js·html5·js
每一天,每一步39 分钟前
react antd点击table单元格文字下载指定的excel路径
前端·react.js·excel
浪浪山小白兔40 分钟前
HTML5 语义元素详解
前端·html·html5
小魔女千千鱼1 小时前
【真机调试】前端开发:移动端特殊手机型号有问题,如何在电脑上进行调试?
前端·智能手机·真机调试