初探less

初探less

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

Less 可以运行在 Node 或浏览器端。

1. 在Node.js环境中使用less

使用 Npm 全局安装 Less

$ npm install less -g

在文件夹中新建以 .less为后缀名的文件，其中写less代码，直接将less文件引入html中是不会生效的，此时需要将less文件转成css文件，才能正常编译，html文件才会有样式，只需要执行下面命令，就可以直接将less文件转成css文件。

lessc main.less > main.css
lessc+空格+less文件名+空格+大于号+空格+css文件名 
或者
lessc main.less main.css
lessc+空格+less文件名+空格+css文件名

或者现在用的编辑器，都有一些插件，可以自动将.less文件编译成.css文件，以vscode为例，Easy LESS插件就可以做到。

2. 在浏览器环境中使用less

到less官网，下载less文件

<link rel="stylesheet/less" type="text/css" href="styles.less" />

引入下载的less文件

<script src="less.js" type="text/javascript"></script>

这样写还只是有less文件，而我们需要的还是css文件，这时我们就需要用到其他工具来帮助我们将less文件编译成css文件，推荐使用考拉 koala-app.com ，直接去官网下载就行。

使用步骤：

1、打开koala软件，然后将我们的less所在的文件夹拖拽到软件中

2、koala会自动读到less文件，然后点击less文件，单击右键，选择输出的路径以及编译后的css文件名，之后在右侧菜单栏点击执行编译即可。

3、编译成功，会在我们指定的文件夹中生成一个css文件，之后将这个css文件引入我们的html文件中即可。

第一次写博客，有什么写的不好或者不对的地方请各位大佬指正哈！