1.背景介绍

什么是less？

是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。可以在多种语言环境中使用，包括浏览器端、桌面客户端、服务端。

--------------------------------------------------------------------------------------------------------------------

2.知识剖析

如何使用less

可以通过npm在命令行上使用较少的内容，作为浏览器的脚本文件下载或用于各种第三方工具。请参阅使用部分以获取更多详细信息。 安装 在服务器上安装Less的最简单方法是通过node.js包管理器npm ，如下所示：

$ npm install -g less 

命令行用法 安装完成后，您可以从命令行调用编译器，如下所示：

$ lessc styles.less 

这将输出编译的CSS stdout。要将CSS结果保存到您选择的文件，请使用：

$ lessc styles.less styles.css 

要输出缩小，你可以使用CSS clean-css插件。当安装插件时，缩小的CSS输出用--clean-css选项指定：

$ lessc --clean-css styles.less styles.min.css 

要查看所有命令行选项，请运行lessc不带参数或查看用法。

使用工具进行编译 监测指定的less文件的变化，如果检测到变化，则自动将less文件输出成相应的css文件。并且大多数工具都提供一定的debug功能。 例如使用koala对less文件进行编译

--------------------------------------------------------------------------------------------------------------------

3.常见问题

1.LESS包含了什么

2.less有哪三种引入方式?

3.为什么要使用less或者scss之类的豫处理器！？

--------------------------------------------------------------------------------------------------------------------

4.解决方案

1.Less在CSS语法的基础上进行了扩展，主要包含： 变量、嵌套、混合、操作符、函数等等.

变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。

混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。

我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。

2.第一种，在html文件中引入less.js和styles.less文件。访问官网的话第一眼就能看到这种方法。

第二种，使用工具编译less文件。

这里汇总了less编译的一系列工具。这些工具基本会以以下方式工作：

监测指定的less文件的变化，如果检测到变化，则自动将less文件输出成相应的css文件。并且大多数工具都提供一定的debug功能。

第三种，服务器端编译less。

对于nodejs服务器，要在服务器端使用less，首先使用npm安装，运行：

npm install less@latest然后，可以require less模块，并调用其提供的函数，以下是官网代码：

var less = require('less');less.render('.class { width: 1 + 1 }', function (e, css) { console.log(css);});对于服务器上的less文件，可以使用fs模块的readFile命令读取该文件，并将结果传递到less.render的第一个参数。然后再用fs的写文件的功能，输出成css文件。或者直接生成http response包，返回客户端。

3.优化代码 简单

--------------------------------------------------------------------------------------------------------------------

5.编码实战

demo

--------------------------------------------------------------------------------------------------------------------

6.扩展思考

less和sass你会选哪个来使用？

1、LESS环境较Sass简单 

２、有同学说LESS使用较Sass简单 

３、相对而言，国内前端团队使用LESS的同学会略多于Sass 

４、从功能出发，Sass较LESS略强大一些

--------------------------------------------------------------------------------------------------------------------

7.参考文献

参考一：博客1

参考二：博客2

参考二：less中文网

--------------------------------------------------------------------------------------------------------------------

8.更多讨论

1.less的三种引入方式有什么优缺点？

2.你比较喜欢less还是sass？

--------------------------------------------------------------------------------------------------------------------