什么是Less?
Less是一个CSS预处理器, Less文件后缀是.less
扩充了CSS 语言,使CSS具备一定的逻辑性、计算能力
可以通俗地理解:Less是一种更好用的CSS
注释
![](https://file.jishuzhan.net/article/1796706869008404481/a3f7ef72b8201e9ee815f3ffca8b52da.webp)
运算
嵌套
Less嵌套的作用:快速生成后代选择器
![](https://file.jishuzhan.net/article/1796706869008404481/46d0b3e172a36d661e1e84256b76622d.webp)
变量
**问题引入:**网页中,文字文字颜色基本都是统一的,如果网站改版,变换文字颜色,如何修改代码?
![](https://file.jishuzhan.net/article/1796706869008404481/5b93d958cb2001834d04f74b67ab80b7.webp)
**解决方案:**使用Less变量,把颜色提前存储到一个容器,设置属性值为这个容器名
![](https://file.jishuzhan.net/article/1796706869008404481/3cffd25050184fc7302180ab9e0550bc.webp)
![](https://file.jishuzhan.net/article/1796706869008404481/fd1bd24fbb2daad972b0023434e0dfdd.webp)
思考:
我一开始接触到这个方法的时候,觉得这完全没必要啊,直接写pink不是更方便吗?
但是存在即合理,这么写有点类似于C语言的宏定义,类似于后端的解耦合
这样如果后续网页改版,需要把主题色由pink改成green,就只需要修改一次即可
这样一来,代码的可维护性会更高
导入
在Less文件中导入其他的Less文件
![](https://file.jishuzhan.net/article/1796706869008404481/7165bef8fe041b4adae85829d4054dc1.webp)
导出
Less编译后生成的CSS文件默认在Less文件的同级目录下
![](https://file.jishuzhan.net/article/1796706869008404481/6d1b118a883012acd088cbf4e879b50f.webp)
如果想改变生成的CSS文件的位置,可使用导出
方法一:
![](https://file.jishuzhan.net/article/1796706869008404481/2dbb494430989958f721d38f740ae140.webp)
方法二: 注意一定要在第一行添加代码
![](https://file.jishuzhan.net/article/1796706869008404481/c78fa71f5032389b9debcf66f9ab4cc2.webp)