【修真院WEB小课堂】less如何使用

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; }

对于嵌套要特别注意层级过多的问题，嵌套太深导致生成css文件的选择器层级过多，影响选择器匹配速度。

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 Overflow

less.js的工作原理： 是内部先用Ajax请求less文件(遍历网页上的具有rel=stylesheet/less属性的文件)，然后按照自己的语法解析，生成对应的CSS然后加在页面中。

问题原因

解决方案

5.编码实战

6.扩展思考

预处理器比较

再谈 CSS 预处理器

抛开语法，深度剖析CSS预处理器

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免费指导。 

快来与我一起学习吧~邀请链接 点击打开链接