Less.js(或者简称Less)是一个CSS预处理器，它可以彻底改变您编写CSS的方式。它很容易安装和设置用于web开发。
有几种安装和配置Less的方法，但是对于在浏览器中开发，或者如果你只是想尝试一下，而不需要在web服务器上安装它，最快的方法是引用less.js库。
让我来告诉你怎么做。
首先,从GitHub下载Less.js．
或者:如果您使用Git，启动CLI，导航到你的项目目录，然后克隆Less repo到你的计算机:
git克隆https://github.com/less/less.js.git里面有很多文件和目录less.js-master目录但我们只对里面的内容感兴趣经销目录(在开放源码术语中是“分发”目录的缩写，用于生产使用的文件)。
在经销目录下，你会发现两个JavaScript文件:less.js而且less.min.js-你可以用任何一个。
less.js是注释版本，如果您喜欢阅读源代码，这是很好的。less.min.js是文件大小更小的缩小版本。
把less.js或less.min.js在项目目录中。
与你的代码编辑器或文本编辑器:
- 创建一个HTML文档。
- 创建Less样式表。它的文件扩展名应该是
.less．例子:styles.less．
在< >头在你的HTML文档中，引用你的Less样式表和你放在项目目录中的Less JS文件:
< >头
<链接href = " styles.less "type = " text / css " rel = "样式表/少" / >
<脚本src = " less.js "type = " text / javascript " > < /脚本>
> < /头
测试设置
现在可以使用Less了。
为了测试您的设置，可以在Less样式表中编写一些Less语法，然后查看它在浏览器中是否正确呈现。
下面的Less CSS使用Less变量和Less饱和度()而且稀释()颜色的功能。
超文本标记语言
<！DOCTYPE html>Less.js: Quick Setup Less.js: Quick Setup
少
* / / *变量@body-bg-color: # 83 b692;/ /绿色@text-color: # fff;/ /白色@button-bg-color: # f9627d;/ /粉红色/*少的CSS */Body{背景:@body-bg-color;颜色:@text-color;字体类型:无衬线;text-align:中心;} a:链接，a:访问{背景:@button-bg-color;颜色:@text-color;显示:inline-block;填充:10 px 10 px;文字修饰:没有;} a:hover {background-color:稀释(@button-bg-color, 50%)；} a:激活{background-color:饱和(@button-bg-color, 50%)；｝结果
浏览器错误提示
默认情况下，当Less在网页中遇到错误时，它会警告你。这在web开发过程中非常有用。
在部署前编译更少的CSS
一旦开发完成，就进行编译.less文件到普通. css文件。如果你想快速解决这个问题，你可以用少在线编译器．
上面的Less CSS通过使用编译成以下内容LESSTESTER：
/*变量*/ /* LESS CSS */ body {background: #83b692;颜色:# ffffff;字体类型:无衬线;text-align:中心;} a:link, a:visited {background: #f9627d;颜色:# ffffff;显示:inline-block;填充:10 px 10 px;文字修饰:没有;} a:hover {background-color: #d08b97; } a:active { background-color: #ff5c79; }以更少的代价前进
尽管本教程中描述的方法是使用Less启动和运行的最快方法，但它最好只用于探索、测试和开发，因为每次访问者请求你的网页时，让JavaScript库处理你的CSS对性能不利。
一旦你准备好承诺Less并在你的web开发项目中使用它，最好的选择将是安装并设置它在web服务器上或删除less.js库和编译你的Less CSS到普通的CSS。
