二、Less编译

less是没有办法直接使用在浏览器上面的，只有css才能直接使用到浏览器的上面。所以我们要把less编译成css。

1. 新建一个less文件

先新建一个less文件，保存到桌面

less

@color:red;
a{
    color:@color;
}

初学者建议使用GUI编译工具来编译less文件，下面是推荐的几个编译工具

安装了node之后就可以直接用node.js来编译了。在桌面目录中打开cmd，然后执行命令dir（获取当前目录的所有文件） --> 在当前目录上面写命令

bash

lessc less.less less.css

就可以看到在桌面上同时生成了一个less.css的文件打开之后里面的内容是：

css

a{
    color:red;
}

这样就可以在html中引用了。（在编译的过程中，同时会进行检查，如果语法有错就会报错）

安装了这个插件之后，输出的时候就可以转化成压缩过的css

bash

# 安装clean-css插件
npm i -g less-plugin-clean-css
# 编译的时候使用插件
lessc --clean-css styles.less styles.min.css

html

<link rel="stylesheet/less" href="example.less" />
<!--注意这里rel里面的值是stylesheet/less，不是stylesheet-->

html

<script src="lesscss-1.4.0.min.js"></script>

特别注意

这里浏览器使用的是ajax来拉取.less文件，所以如果文件是file://开头和跨域CORS的情况，就无法拉取less文件，还有部分服务器（IIS居多）会对未知的后缀名的文件返回404

解决方案就是为.less文件配置MIME值为text/css，或者直接将.less文件改名为.css文件即可