前端开发必学的Less实用指南（详细版）

      Less(Leaner Style Sheets的缩写)，它是一门向后兼容的CSS扩展语言，Less和Css两者之间是非常像的，因此，如果有CSS基础，学起Less也是比较容易的。Less和其他预处理在本质上都是JS库，这些库的作用是将预处理代码编译成标准的CSS代码，所以我们使用预处理器可以通过多种方式来使用。

          使用JS直接使用Less的时候需要注意，link的标签需要在less.js之前引入，并且link标签的rel属性要设置为stylesheet/less.

          通过npm全局安装        

-g参数表示将lessc命令安装到全局环境，如果想要安装特定的 版本，可以在包名称后面添加@版本号，如npm install [email protected] -g.

在命令行中运行如下代码就可以将test.less编译为test.css。

但是在命令行中手动去编译less文件为css文件的这种使用频率不高，因为大多数情况下，作为前端一般都使用Vue,React等主流框架进行开发，所以我们大多数情况下都会在Webpack中使用Less.

   由于Webpack本身只能处理js文件，所以需要借助less-loader来帮忙处理Less文件

  配置webpack.config.js:

 实际上，在使用像Vue这样的框架时，官方的CLI脚手架已经帮我们集成了css预处理器，不需要我们自己手动进行Webpack的配置，在使用脚手架初始化项目的时候勾选上自己喜欢的预处理器就好了。

      less支持以嵌套的方式去写css代码，不过多赘述，直接上代码

按照父类嵌套子类规范来书写的css：

使用Less嵌套写法：

以上这两种写法在页面上得到的效果是一样的，但是我们可以直观地感受到Less的写法更优雅，更简洁,在Less写法中支持嵌套使用父选择器&，这样写起来更简洁优雅，不需要再去嵌套复杂的css代码了。

    在Less中，支持想JS中声明一个变量，在变量声明时需要以@开头，并且需要以分号来结束声明，在使用时直接用变量名来替换设置的样式值即可。代码如下：

编译后的CSS代码：

使用变量的好处就是，我们可以将公共的样式值抽离出来，如果多个模块文件共用变量时，我们就可以将这些公共的样式值放在一个单独的文件中，然后使用@import导入。

   下面是一个公共文件的public.less的代码：

在业务模块中就可以通过@import来使用public.less中的一些变量：

   以上的例子都是用在CSS中的属性值，其实变量还能以插值的形式在选择器名称，属性名称，URL路径以及@import声明中使用，插值用法类似于JS模板字符串，在使用时首先定义一个变量a，然后以@{a}的方式去使用：

编译后：

 熟悉Vue框架的对mixin应该很熟悉，Less中的混合就和Vue中的mixin的概念差不多，Less中的混合就是一个设置了属性的选择器a混入选择器b中，这样，选择器b中既有选择器b本身设置的属性也包含选择器a中的属性，Less混合代码如下：

编译后的CSS代码如下：

以上的用法都是固定的属性，其实混合还可以带参数使用，这种用法跟 JS 函数非常类似

编译后的CSS如下：

另外需要注意的是，Less 代码编译时，会把混合代码也选择渲染出来，如果不想保留混合原本的代码，定义的时候可以在它后面加上 () ；此外，在混合代码后面加上!important,所有的属性都会加上!important。

Less中使用函数和计算的频率并不是特别高，因为CSS本身就是负责页面样式的，计算的事情还是交给JS处理比较好，在这里也就以颜色计算和图片尺寸计算简单地说一下：

以上得到的颜色效果是一样的

图片相关函数：

 在上述代码中，由于不确定图片尺寸而无法精确涉及元素样式时，Less中和图片有关的函数就起作用了。

关于计算属性，在Less官网中给的定义是这样的：

算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。

如果光看官网中的解释可能会有点抽象，在代码中诠释这段话的具体代码如下：