1.背景介绍
CSS不是一种编程语言，可以用它开发网页样式，但是没法用它编程，没有自己的变量、简单的逻辑程序、函数及其他编程语法，只是一行行单纯的属性描述，写起来相当费事，而且代码难以组织和维护。
CSS预处理器用一种专门的编程语言，进行样式设计，然后编译成CSS文件，以供项目使用。 CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，使用变量、简单的逻辑程序、函数等在编程语言中的一些基本特性，让CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护。
使用最为普遍的三款CSS预处理器框架分别是 SASS/SCSS（2006）、LESS（2009）和Stylus（2010）。
2.知识剖析
LESS 语法
1 变量
LESS 允许开发者自定义变量，变量可以在全局样式中使用，变量使得样式修改起来更加简单。
|
1
2
3
4
5
|
@border-color : #b5bcc7;
.mythemes tableBorder{
border : 1px solid @border-color;
}
|
|
1
2
3
|
.mythemes tableBorder {
border: 1px solid #b5bcc7;
}
|
变量是 VALUE（值）级别的复用，可以将相同的值定义成变量统一管理起来。 该特性适用于定义主题，我们可以将背景颜色、字体颜色、边框属性等常规样式进行统一定义，这样不同的主题只需要定义不同的变量文件就可以了。
LESS 中的变量也有生命周期，也就是 Scope（变量范围，开发人员惯称之为作用域），简单的讲就是局部变量还是全局变量的概念，查找变量的顺序是先在局部定义中找，如果找不到，则查找上级定义，直至全局。
|
1
2
3
4
5
6
7
8
9
10
11
|
@width : 20px;
#homeDiv {
@width : 30px;
#centerDiv{
width : @width;// 此处应该取最近定义的变量 width 的值 30px
}
}
#leftDiv {
width : @width; // 此处应该取最上面定义的变量 width 的值 20px
}
|
|
1
2
3
4
5
6
|
#homeDiv #centerDiv {
width: 30px;
}
#leftDiv {
width: 20px;
}
|
2 Mixins
Mixins（混入）功能多重继承的一种实现，在 LESS 中，混入是指在一个 CLASS 中引入另外一个已经定义的 CLASS，就像在当前 CLASS 中增加一个属性一样。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
// 定义一个样式选择器
.roundedCorners(@radius:5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
// 在另外的样式选择器中使用
#header {
.roundedCorners;
}
#footer {
.roundedCorners(10px);
}
|
经过编译生成的 CSS 文件如下：
|
1
2
3
4
5
6
7
8
9
10
|
#header {
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
#footer {
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
|
Mixins 其实是一种嵌套，它允许将一个类嵌入到另外一个类中使用，被嵌入的类也可以称作变量，简单的讲，Mixins 其实是规则级别的复用。
Mixins 是 LESS 中很重要的特性之一。当我们拥有了大量选择器的时候，特别是团队协同开发时，如何保证选择器之间重名问题？LESS 采用了命名空间的方法来避免重名问题，在 mixins 的基础上扩展了一下，看下面这样一段代码：
|
1
2
3
4
|
#mynamespace {
.home {...}
.user {...}
}
|
这样我们就定义了一个名为 mynamespace 的命名空间，如果我们要复用 user 这个选择器的时候，我们只需要在需要混入这个选择器的地方这样使用就可以了。#mynamespace > .user。
3 嵌套规则
在我们书写标准 CSS 的时候，遇到多层的元素嵌套这种情况时，我们要么采用从外到内的选择器嵌套定义，要么采用给特定元素加 CLASS 或 ID 的方式。在 LESS 中我们可以这样写：
|
1
2
3
4
5
6
7
|
<
div
id
=
"home"
>
<
div
id
=
"top"
>top</
div
>
<
div
id
=
"center"
>
<
div
id
=
"left"
>left</
div
>
<
div
id
=
"right"
>right</
div
>
</
div
>
</
div
>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
#home{
color : blue;
width : 600px;
height : 500px;
border:outset;
#top{
border:outset;
width : 90%;
}
#center{
border:outset;
height : 300px;
width : 90%;
#left{
border:outset;
float : left;
width : 40%;
}
#right{
border:outset;
float : left;
width : 40%;
}
}
}
|
经过编译生成的 CSS 文件如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
#home {
color: blue;
width: 600px;
height: 500px;
border: outset;
}
#home #top {
border: outset;
width: 90%;
}
#home #center {
border: outset;
height: 300px;
width: 90%;
}
#home #center #left {
border: outset;
float: left;
width: 40%;
}
#home #center #right {
border: outset;
float: left;
width: 40%;
}
|
从上面的代码中我们可以看出，LESS 的嵌套规则的写法是 HTML 中的 DOM 结构相对应的，这样使我们的样式表书写更加简洁和更好的可读性。同时，嵌套规则使得对伪元素的操作更为方便。
|
1
2
3
4
5
6
7
8
|
a {
color: red;
text-decoration: none;
&:hover {// 有 & 时解析的是同一个元素或此元素的伪类，没有 & 解析是后代元素
color: black;
text-decoration: underline;
}
}
|
经过编译生成的 CSS 文件如下：
|
1
2
3
4
5
6
7
8
|
a {
color: red;
text-decoration: none;
}
a:hover {
color: black;
text-decoration: underline;
}
|
4 运算及函数
在我们的 CSS 中充斥着大量的数值型的 value，比如 color、padding、margin 等，这些数值之间在某些情况下是有着一定关系的，那么我们怎样利用 LESS 来组织我们这些数值之间的关系呢？我们来看这段代码：
|
1
2
3
4
5
|
@init: #111111;
@transition: @init*2;
.switchColor {
color: @transition;
}
|
经过编译生成的 CSS 文件如下：
|
1
2
3
|
.switchColor {
color: #222222;
}
|
上面的例子中使用 LESS 的 operation 是 特性，其实简单的讲，就是对数值型的 value（数字、颜色、变量等）进行加减乘除四则运算。
下面是http://lesscss.cn/列出的less函数大类，颜色相关的函数占了大部分，剩下字符、类型判断都是一些基础函数，less的函数功能较弱。
图片来自http://lesscss.cn/functions/截图
5 Comments
适当的注释是保证代码可读性的必要手段，LESS 对注释也提供了支持，主要有两种方式：单行注释和多行注释，这与 JavaScript 中的注释方法一样，我们这里不做详细的说明，只强调一点：LESS 中单行注释 (// 单行注释 ) 是不能显示在编译后的 CSS 中，所以如果你的注释是针对样式说明的请使用多行注释。
6 Importing
LESS 提供了一个我们很熟悉的功能— Importing。我们可以通过这个关键字引入我们需要的 .less 或 .css 文件。 如：
@import “variables.less”;
.less 文件也可以省略后缀名，像这样：
@import “variables”;
引入 CSS 同 LESS 文件一样，只是 .css 后缀名不能省略。
LESS 使用
1 浏览器端
我们可以直接在客户端使用 .less（LESS 源文件），只需要从 http://lesscss.org下载 less.js 文件，然后在我们需要引入 LESS 源文件的 HTML 中加入如下代码：
|
1
|
<
link
rel
=
"stylesheet/less"
type
=
"text/css"
href
=
"styles.less"
>
|
LESS 源文件的引入方式与标准 CSS 文件引入方式一样：
需要注意的是：在引入 .less 文件时，rel 属性要设置为“stylesheet/less”。还有更重要的一点需要注意的是：LESS 源文件一定要在 less.js 引入之前引入，这样才能保证 LESS 源文件正确编译解析。
2 服务器端
LESS 在服务器端的使用主要是借助于 LESS 的编译器，将 LESS 源文件编译生成最终的 CSS 文件，目前常用的方式是利用 node 的包管理器 (npm) 安装 LESS，安装成功后就可以在 node 环境中对 LESS 源文件进行编译。
3 编译成静态CSS文件
通过 LESS 的编译器，将 LESS 文件编译成为 CSS 文件，在 HTML 文章中引入使用。这里要强调的一点，LESS 是完全兼容 CSS 语法的，也就是说，我们可以将标准的 CSS 文件直接改成 .less 格式，LESS 编译器可以完全识别。
3.常见问题
less.js 在 chrome 中运行
1个警告，2个报错
[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
[弃用]在主线程上同步XMLHttpRequest已被弃用，由于它对终端用户体验的不利影响。 如需更多帮助，请查看https://xhr.spec.whatwg.org/。
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
协议方案仅支持以下跨源请求：http，data，chrome，chrome-extension，https。
Uncaught (in promise) DOMException: Failed to execute 'send' on 'XMLHttpRequest'
（in promise）未捕获DOMException：无法执行'XMLHttpRequest'上的'发送'：
4.解决方案
Stack Overflowless.js的工作原理： 是内部先用Ajax请求less文件(遍历网页上的具有rel=stylesheet/less属性的文件)，然后按照自己的语法解析，生成对应的CSS然后加在页面中。
问题原因
解决方案
5.编码实战
6.扩展思考
预处理器比较
7.参考文献
参考一 LESS CSS 框架简介
参考二 less中文网
8.更多讨论
问：less怎么编译？
答：它的编译器就是less.js ，引入之后就可以编译。
less.js的工作原理： 是内部先用Ajax请求less文件(遍历网页上的具有rel=stylesheet/less属性的文件)，然后按照自己的语法解析，生成对应的CSS然后加在页面中。
问：less文件可以直接使用？
答：可以在html文件中直接引入，需要设置 rel="stylesheet/less"
We recommend using less in the browser only for development or when you need to dynamically compile less and cannot do it serverside. This is because less is a large javascript file and compiling less before the user can see the page means a delay for the user.
我们推荐在浏览器使用less仅在以下情况：开发者或者在服务器侧不能实现，需要动态编译less时。这是因为less.js 是大型JavaScript文件，在用户看到页面之前编译less意味着对于用户的延迟。
问：less容易上手吗？
答：less的写法形式和css很相似，并没有太多的转换成本，了解基础语法之后就可以上手。
技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。
快来与我一起学习吧~邀请链接 点击打开链接