前端构建：Less入了个门

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　

说到前端构建怎能缺少CSS预处理器呢！其实CSS的预处理器有很多啦，比较出名的有Scss、Sass、Stylus和Less。（最近还听说出现了Autoprefixer等CSS后处理器，可参考@一丝的PPT）

众多CSS预处理器中Less的语法最接近原生CSS，因此相对来说更容易上手，假如有JS、C#等编程经验的话，其实上述的几种预处理器的学习成本也不会特别高。下面是我们这阵子的学习笔记，以便日后查阅。

最好的入门教程——官网地址：http://lesscss.org/

最佳实践之一——Bootstrap

由于内容较多，特设目录一坨：

<a href="http://www.cnblogs.com/fsjohnhuang/p/4187675.html#a3"> 三、内联样式和外联样式</a>

搭建Less的学习环境非常简单，只需在</body>标签前通过<script type="text/javascript" src="less.js"></script>引入处理器即可实现浏览器端中将less预编译为css样式。更有效的方式是通过如下代码监测less样式，自动编译为css样式，从而减少我们修改less代码后需按F5后才看到实际效果的繁琐步骤。

基于我们现在使用的是浏览器端进行预编译，因此Less可用于内联样式和外联样式当中。

内联样式如下：

外联样式引入如下：

Less中的变量有以下规则：

以@作为变量的起始标识，变量名由字母、数字、_和-组成

没有先定义后使用的规定；

定义时 "@变量名: 变量值;" 的形式；引用时采用 "@变量名" 或 "@{变量名}" 的形式；

Less源码：

最终输出：

less变量除了支持#FFF，12px，12，test等单值类型外，还支持列表类型，通过内置函数extract通过索引获取列表元素，通过内置函数length获取列表的元素个数

最终输出：

　　Less源码：

　　最终输出：

采用&引用完整的父选择器

<a href="http://www.cnblogs.com/fsjohnhuang/p/4187675.html#a43multiple">可通过追加和预追加的方式加工&，从而生成新的选择器</a>

<a href="http://www.cnblogs.com/fsjohnhuang/p/4187675.html#a43:">通过<code>&::after</code>等方式添加伪元素、伪类样式规则集合</a>

<a href="http://www.cnblogs.com/fsjohnhuang/p/4187675.html#a43multiple">同一个选择器可使用多个&</a>

<a href="http://www.cnblogs.com/fsjohnhuang/p/4187675.html#a43revert">通过在选择器后添加 "空格&"的方式，可将当前选择器排列到最前面</a>

<a href="http://www.cnblogs.com/fsjohnhuang/p/4187675.html#a43group">&指向组选择器时，会生成新的组选择器</a>

最终输出：

less样式文件可通过 @import '文件路径'; 引入外部的less文件。

注意：

不带扩展名或带非.less的扩展名均被视为less文件;

<code>@import</code>可出现在任何位置，而不像css的<code>@import</code>那样只能放在文件第一行。

另外<code>@import</code>还提供了6个可选配置项(分别为<code>reference</code>,<code>inline</code>,<code>less</code>,<code>css</code>,<code>once</code>,<code>multiple</code>)，用来改变引入文件的特性。语法为： @import (reference) '文件路径'; 。下面为各配置项的具体说明：

<dt>1. @import (reference) "文件路径"; </dt>

<dd>　　将引入的文件作为样式库使用，因此文件中样式不会被直接编译为css样式规则。当前样式文件通过<code>extend</code>和<code>mixins</code>的方式引用样式库的内容。</dd>

<dt>2. @import (inline) "文件路径"; </dt>

<dd>　　用于引入与less不兼容的css文件，通过inline配置告知编译器不对引入的文件进行编译处理，直接输出到最终输出。注意：引入的文件和当前文件会被编译为一个样式样式</dd>

<dt>3. @import (less) "文件路径"; </dt>

<dd>　　默认使用该配置项，表示引入的文件为less文件。</dd>

<dt>4. @import (css) "文件路径"; </dt>

<dd>　　表示当前操作为CSS中的<code>@import</code>操作。当前文件会输出一个样式文件，而被引入的文件自身为一个独立的样式文件</dd>

<dt>5. @import (once) "文件路径"; </dt>

<dd>　　默认使用该配置项，表示对同一个资源仅引入一次。</dd>

<dt>6. @import (multiple) "文件路径"; </dt>

<dd>　　表示对同一资源可引入多次。</dd>

有两种语法形式， <selector>:extend(<parentSelector>){} 和 <selector>{ &:extend(<parentSelector>); }

注意事项：

<dt> Less源码：</dt>

最终输出：

Less源码：

注意：不能extend当前media query块内部的子media query块中的选择器样式；但可以extend父media query块的选择器样式。

　 Less源码：

　最终输出：

　　Less源码：

　　Mixin相当于macro，会将样式规则内联到调用的位置中。而Less中的mixin有以下的注意点：

<dt>　　Less源码：</dt>

Less中通过混合（Mixin）后的when关键字来提供选择的作业控制，通过递归来实现循环的作业控制。

Less还支持+、-、*、/运算符。但对单位不一致的运算数进行运算要注意以下两点：

1. 运算数与运算符间必须用空格分隔；

2. 以第一个运算数的单位作为运算结果的单位；

Less源码：

Less为我们提供了一个功能强大的内置函数库，其中绝大部分为颜色处理函数。下面着重介绍Misc Function中的default函数、String Function中的escape函数和颜色处理函数。

示例：

虽然上述示例逻辑上不合理。但可以看出default函数用于条件控制当中，充当else或switch语句中default的角色。

通过官网提供的综合示例我们可以更好理解它的用法：

注意：

1. default函数必须在条件控制语句当中使用；

2. default函数可实现比else更复杂的功能，如下：

顾名思义就是对字符串中的特定字符进行编码，该函数将对<code>\<space\></code>, <code>#</code>, <code>^</code>, <code>(</code>, <code>)</code>, <code>{</code>, <code>}</code>, <code>|</code>, <code>:</code>, <code>></code>, <code><</code>, <code>;</code>, <code>]</code>, <code>[ 和 </code><code>=字符进行编码。</code>

颜色处理函数又分为四大类：颜色定义函数(Color Definition)、颜色通道值获取函数(Color Channel)、颜色通道值修改函数(Color Operation Function)、混色函数(Color Blending)。

这里仅仅介绍常用的lighten和darken函数。

lighten(color, amount) ，color为颜色，amount为增加的亮度值，取值范围为0-100%。

darken(color, amount) ，color为颜色，amount为减少的亮度值，取值范围为0-100%。

到这里我想大家已经对Less有一定程度的了解，并希望在将其加入你的开发工具包中。但通过less.js将Less解析器引入到浏览器肯定是不适合开发的，而cli工具lessc更适合开发环境中使用。在使用之前我们先要通过npm来安装less。

然后我们就可以通过 lessc [option option=parameter ...] <source> [destination] 的命令格式来调用lessc了！

lessc的option选项较多，我将主要的选项分为lessc命令信息相关、sourcemap相关、@import指令相关和插件相关四类。

1. lessc命令信息相关

lessc -h ，获取lessc命令的帮助信息；

lessc -v ，获取lessc命令的版本号。

2. sourcemap相关

由于在浏览器直接查看和操作的是CSS样式规则，而我们开发时使用的Less代码，这会导致难以找到CSS样式规则所对应的Less代码从而增大调试难度。而sourcemap就是为了解决这一痛点而提出的技术解决方案，其原理就是通过一个map文件来保存两个文件中代码的对应关系，然后支持sourcemap的浏览器的devTools中就会根据这些对应关系来定位相应的Less代码。（Chrome和FF均支持sourcemap，IE11及以下均不支持）

若对sourcemap不太了解的可以参考《前端构建：Source Maps详解》

--source-map ，生成与生成的css同名的sourcemap文件（例如生成的css文件为main.css，那么sourcemap文件就是main.css.map），且与css文件位于同一目录下；

--source-map=<sourcemap文件路径> ，自定义sourcemap文件的路径；

--source-map-rootpath=<sourcemap文件中sources属性值的路径前缀> ，假如main.less文件位于src/less下，而生成的css和sourcemap文件位于bin/style下，那么就需要修改sourcemap文件中用于指向less文件路径的sources属性值，浏览器才能通过sourcemap文件查找到less文件。上述例子的命令为：

lessc --source-map --source-map-rootpath=../../src/less/main.less src/less/main.less bin/style/main.css

--source-map-map-inline ，以data URI Scheme的形式将sourcemap文件内容内嵌到css文件中。

--source-map-url=<css文件中指向sourcemap文件的url> ，默认情况下css文件的最后一行会插入如 /*# sourceMappingURL=main.css.map */ 的内容来指向sourcemap文件，而该选项则可修改sourceMappingURL的值。

3. @import指令相关

--include-path=<path>[;<path>]* ，通过@import指令引入外部less或css等文件时存在引入的文件路径到底是以哪个目录作为参考的问题，我们可以通过该选项来指定参考目录，当存在多个参考目录时，使用;号分隔。

--relative-urls 或 -ru ，用于保持样式库中的图片等资源的相对路径。示例：

不使用该选项时：

使用该选项时：

4. 插件相关

lessc以插件的形式来增强其功能，下面仅介绍clean-css插件，其他插件请参考http://lesscss.org/usage/#plugins-list-of-less-plugins

首先通过npm安装插件 npm install -g less-plugin-clean-css ，然后通过--clean-css选项来启动CSS压缩功能。

　　如： lessc file.less --clean-css="--s1 --advanced --compatibility=ie8"

先假定我们开发环境的目录结构如下（灰色表示文件由构建工具生成）：

sample

|-- build.bat 构建工具

|-- lib 第三方依赖库

| |-- less

| |-- base.less

| |-- img

| |-- nav.png

|-- src 源码

| |-- less

| | |-- main.less

| |-- index.html

|-- bin 编译后的文件

| |-- style

| |-- main.css

| |-- main.css.map

|-- dist 发布文件

　　　　|-- lib

　　　　|　 |-- less

　　　　| |-- img

　　　　| |-- nav.png

　　　　|-- app

　　　　　　|-- style

　　　　　　| 　|--main.css

　　　　　　|-- index.html

index.html文件内容：

样式库base.less文件内容：

main.less文件内容：

我们一般将工程代码级别的产出分为源码、可执行代码和可发布代码三种，而可执行代码和可发布代码的构建需求是不同的，因此构建方式也有所区别，也就是lessc使用的选项也会不同。下面将针对不同的产出物来介绍lessc的使用。

1. 可执行代码

我将可执行代码部分再细分为release和debug两种编译模式，可以看到通过变量@env来实现不同模式下采用不同的样式规则。默认采用release模式编译源码。

在执行lessc命令时通过选项--modify-var="env=debug"即可以debug模式编译源码。

可以看到上述编译过程中均会生成sourcemap文件以便调试使用。

2. 可发布代码

对于发布的内容我们会对其进行压缩处理

由于sourcemap文件仅在开发阶段有用，因此生成发布代码时就不要生成了。

完整的构建文件build.bat如下：

View Code

然后在CMD中输入 build bin 、 build debug 或 build dist 即可构建工程了！

我们沿用第八节的工程目录结构来演示。

sample-grunt

|-- package.json

|-- Gruntfile.js

|-- node_modules

|-- bin 编译后的文件

其中用于将Less编译为CSS的插件为grunt-contrib-less，下面我们对应第八章的内容来介绍该插件的选项。

sourcemap相关：

{Boolean} sourceMap，对应lessc中属性值为true/false的--source-map选项；

{String} sourceMapFilename，对应lessc中属性值为String的--source-map选项；

{String} sourceMapRootPath，对应lessc的--source-map-rootpath选项；

{String} sourceMapURL，对应lessc的--source-map-url选项；

{Boolean} outputSourceFiles，，对应lessc的--source-map-map-inline选项；

@import指令相关：

　{Array|String} paths，对应lessc的--include-path选项；

{Boolean} relativeUrls，对应lessc的--relative-urls选项；

插件相关：

　 {Array} plugins，数组元素为插件实例。

Gruntfile.js内容如下：

到这里我只能和大家说一声，“辛苦了各位，终于看完了耶！”。但正如标题所说，此刻无论是对less的使用，还是将其融入我们的开发工作流，我们均是入了个门而已。那应该如何进阶呢？那就是

如果您觉得本文的内容有趣就扫一下吧！捐赠互勉！

<a href="http://home.cnblogs.com/u/fsjohnhuang/">^_^肥仔John</a>

<a></a>

评论列表

不错，以前接触过less，现在看来也是学到很多

没有什么吸引力啊，能不能整点干货呢？

css写法快不只有这种方式嘛

http://pic.cnblogs.com/face/424274/20130126034040.png

css中的@import指令并不是说只能放在.css文件第一行，而是说一定要在所有的样式表之前使用，多个引用写多行；

这个地方的“第一行”容易让很多不了解css@import指令的人误解

请问下，less.watch机制可以在我更改了less中的代码后，浏览器无需刷新页面，就能显示最新的结果，这是如何实现的？

http://pic.cnblogs.com/face/696637/20141219193815.png

看extend 6.2

// 匹配失败

// 形式1，不支持以变量作入参

.son1:extend(@{p1}){}

// 形式2，不支持以变量作为选择器的规则集合

.son1:extend(.parent2){}

// 匹配成功

.son2:extend(.parent1){}

.son1:extend(.parent2){}和 .son2:extend(.parent1){}不是一回事吗？我是小白，看到这里我蒙逼了，不懂为啥第一个匹配失败，第二个就匹配成功了

http://pic.cnblogs.com/face/853802/20170425114819.png

我又仔细看了一遍，好像是懂了

非常好,正是我需要的,谢谢大佬,收藏了

http://pic.cnblogs.com/face/1108721/20170221073311.png

<a href="http://www.ucancode.com/index.htm" target="_blank">【推荐】超50万VC++源码: 大型工控、组态\仿真、建模CAD源码2018！</a>

<a href="https://cloud.tencent.com/developer/support-plan?fromSource=gwzcw.710852.710852.710852" target="_blank">【推荐】加入腾讯云自媒体扶持计划，免费领取域名&服务器</a>

<b>最新IT新闻</b>:

<b>最新知识库文章</b>:

<a href="https://github.com/fsjohnhuang" target="_blank">肥仔John@github</a>

作品：

<a href="https://github.com/fsjohnhuang/iScheme" target="_blank">iScheme—Scheme解释器</a>

前端构建：Less入了个门

继续阅读

主流浏览器四大综合性能测试

JavaScript自学笔记【4】函数的声明与调用目录二、函数的声明三、函数的调用

请求超时VUE axios重新再次请求

nodejs微信开发---授权登录+获取用户信息微信网页授权

debian9升级4.9.0内核到4.19.2内核过程

Javascript构建Bingo卡片游戏

JavaScript的那些坑之事件代理事件代理事件阶段

javascript的for (var i in data)慎用javascript中的for (var i in data)谨慎用

tab鼠标经过菜单切换

vue （vue2.0）使用总结(从大体结构总结)

vue搭建过程及出现问题

/\B(?=(?:\d{3})+$)/g 一条令人费解的正则表达式

适用于JavaScript的ECMAScript 2020规范向前发展

JS生成uuid的四种方法

layui多任务上传添加进度条