维护css弊端

CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。

• CSS 需要书写大量看似没有逻辑的代码，CSS 冗余度是比较高的。
• 不方便维护及扩展，不利于复用。
• CSS 没有很好的计算能力
• 非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码项目。

什么是less

LESS CSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便css的编写和维护。

LESS CSS 可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。

说明：本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上， 为 CSS 加入程序式语言的特性。

Less在CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。

在哪里获得 学习less

官网地址

官网： 英文官网：http://lesscss.org/，中文官网：https://less.bootcss.com/about/

Less.js 下载地址：https://github.com/less/less.js/tree/master/dist

怎么使用less

Less安装

①安装nodejs，可选择版本(8.0)，网址：http://nodejs.cn/download/

②检查是否安装成功，使用cmd命令（win10是window+r 打开运行输入cmd） —输入“node –v”查看版本即可

③基于nodejs在线安装Less，使用cmd命令“npm install -g less”即可

④检查是否安装成功，使用cmd命令“ lessc -v ”查看版本即可

安装之后不同的编程软件有不同的使用方法 ,以下介绍两个软件 VScode 和 Hbuilder的使用方法,如果你使用的其他软件,可以自行百度使用方法

在VScode 中使用less

安装 Easy LESS 插件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-we9zIvpz-1642427968100)

Easy LESS 插件用来把less文件编译为css文件

安装完毕插件，重启 vscode。重启 vscode 重启 vscode

只要保存一下Less文件，会自动生成CSS文件。

在Hbuilder中使用Less

首先插件中安装less

找不到的插件可以去插件市场找到需要安装的插件导入即可 ,不知道如何安装插件可自行百度 hbuilder 安装插件

安装过后默认是不能进行less自动生成css文件的 需要进行配置

找到工具 > 外部命令插件配置 > 找到less插件 > package.json

打开josn文件配置如下 修改过配置之后不生效需要重启Hbuilder 重启Hbuilder 重启Hbuilder 重要事情说三遍

在hbuilder中创建一个扩展名为.less的文件，保存后会自动会生成同名的.css文件，在html文件里样式表引入这个.css的文件即可。每次编辑.less的文件保存后，相应的.css文件都会更新。

为.less的文件，保存后会自动会生成同名的.css文件，在html文件里样式表引入这个.css的文件即可。每次编辑.less的文件保存后，相应的.css文件都会更新。