前端开发入门：less入门

曾经终败给现在 2022-08-19 08:29 214阅读 0赞

Less是什么？

Less CSS 是一个使用广泛的 CSS 预处理器，通过简单的语法和变量对 CSS 进行扩展，可减少很多 CSS 的代码量。

Less 将 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助[Node.js][]).

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

Less 可运行在 Node 环境,浏览器环境和Rhino环境.同时也有3种可选工具供你编译文件和监视任何改变。

[Less][]是一种动态的样式语言。Less扩展了CSS的动态行为，比如说，设置变量（Variables）、混合书写模式（mixins）、操作（operations）和功能（functions）等等，最棒的是，[Less][]使用了现有的CSS语法，也就是说，你可以直接把你现成的样式文件“style.css”直接改成“style.less”，它也能正常工作。

比如；在线less编辑器:http://tool.oschina.net/less 可以通过该网页工具直接通过less代码轻松转换成css代码。

我们也可以从lesscss中文网：http://www.1024i.com/demo/less/  和http://lesscss.cn/上面学习相应的less的基本用法和环境搭建等等。

http://www.bootcss.com/p/lesscss/

例如:

@base: #f938ab;
    
    .box-shadow(@style, @c) when (iscolor(@c)) {
      -webkit-box-shadow: @style @c;
      box-shadow:         @style @c;
    }
    .box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
      .box-shadow(@style, rgba(0, 0, 0, @alpha));
    }
    .box {
      color: saturate(@base, 5%);
      border-color: lighten(@base, 30%);
      div { .box-shadow(0 0 5px, 30%) }
    }

编译为：

.box {
      color: #fe33ac;
      border-color: #fdcdea;
    }
    .box div {
      -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    }

Less安装

在[node.js][] 中安装LESS最简单的方式就是使用Node包管理工具npm来安装:

$ npm install -g less

Less命令行用法

一旦安装完成，就可以在命令行中调用，例如:

$ lessc styles.less

这样的话编译后的CSS将会输出到 'stdout' 中，你可以选择将这个输出重定向到文件中:

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

如果你想输出一个压缩后的CSS，只要加到 `-x` 选项即可。如果你想要更NB的压缩，你也可以选择使用 [ Clean CSS][Clean CSS]压缩器，只要加上 `--clean-css` [ 插件][Link 1]即可。直接运行lessc，不带任何参数将可以看到所有的命令行参数或 查看 [ 用法][Link 2].

代码用法

你可以在Node中调用编译器，例如：

var less = require('less');
    
    less.render('.class { width: (1 + 1) }', function (e, output) {
      console.log(output.css);
    });

将会输出

.class {
      width: 2;
    }

看 [Usage][] 见更多内容。

## LESS 原理及使用方式 ##

本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。下面是一个简单的例子：

##### 清单 1. LESS 文件 #####

@color: #4D926F; 
    
     #header { 
      color: @color; 
     } 
     h2 { 
      color: @color; 
     }

经过编译生成的 CSS 文件如下：

##### 清单 2. CSS 文件 #####

#header { 
      color: #4D926F; 
     } 
     h2 { 
      color: #4D926F; 
     }

从上面的例子可以看出，学习 LESS 非常容易，只要你了解 CSS 基础就可以很容易上手。

LESS 可以直接在客户端使用，也可以在服务器端使用。在实际项目开发中，我们更推荐使用第三种方式，将 LESS 文件编译生成静态 CSS 文件，并在 HTML 文档中应用。

### 客户端 ###

我们可以直接在客户端使用 .less（LESS 源文件），只需要从 [ http://lesscss.org][Less]下载 less.js 文件，然后在我们需要引入 LESS 源文件的 HTML 中加入如下代码：

LESS 源文件的引入方式与标准 CSS 文件引入方式一样：

需要注意的是：在引入 .less 文件时，rel 属性要设置为“stylesheet/less”。还有更重要的一点需要注意的是：LESS 源文件一定要在 less.js 引入之前引入，这样才能保证 LESS 源文件正确编译解析。

### 服务器端 ###

LESS 在服务器端的使用主要是借助于 LESS 的编译器，将 LESS 源文件编译生成最终的 CSS 文件，目前常用的方式是利用 node 的包管理器 (npm) 安装 LESS，安装成功后就可以在 node 环境中对 LESS 源文件进行编译。

在项目开发初期，我们无论采用客户端还是服务器端的用法，我们都需要想办法将我们要用到的 CSS 或 LESS 文件引入到我们的 HTML 页面或是桥接文件中，LESS 提供了一个我们很熟悉的功能— Importing。我们可以通过这个关键字引入我们需要的 .less 或 .css 文件。 如：

@import “variables.less”;

.less 文件也可以省略后缀名，像这样：

@import “variables”;

引入 CSS 同 LESS 文件一样，只是 .css 后缀名不能省略。

### 使用编译生成的静态 CSS 文件 ###

我们可以通过 LESS 的编译器，将 LESS 文件编译成为 CSS 文件，在 HTML 文章中引入使用。这里要强调的一点，LESS 是完全兼容 CSS 语法的，也就是说，我们可以将标准的 CSS 文件直接改成 .less 格式，LESS 编译器可以完全识别。

## 语法 ##

### 变量 ###

LESS 允许开发者自定义变量，变量可以在全局样式中使用，变量使得样式修改起来更加简单。

我们可以从下面的代码了解变量的使用及作用：

##### 清单 3 LESS 文件 #####

@border-color : #b5bcc7; 
    
     .mythemes tableBorder{ 
       border : 1px solid @border-color; 
     }

经过编译生成的 CSS 文件如下：

##### 清单 4. CSS 文件 #####

.mythemes tableBorder { 
      border: 1px solid #b5bcc7; 
     }

从上面的代码中我们可以看出，变量是 VALUE（值）级别的复用，可以将相同的值定义成变量统一管理起来。

该特性适用于定义主题，我们可以将背景颜色、字体颜色、边框属性等常规样式进行统一定义，这样不同的主题只需要定义不同的变量文件就可以了。当然该特性也同样适用于 CSS RESET（重置样式表），在 Web 开发中，我们往往需要屏蔽浏览器默认的样式行为而需要重新定义样式表来覆盖浏览器的默认行为，这里可以使用 LESS 的变量特性，这样就可以在不同的项目间重用样式表，我们仅需要在不同的项目样式表中，根据需求重新给变量赋值即可。

LESS 中的变量和其他编程语言一样，可以实现值的复用，同样它也有生命周期，也就是 Scope（变量范围，开发人员惯称之为作用域），简单的讲就是局部变量还是全局变量的概念，查找变量的顺序是先在局部定义中找，如果找不到，则查找上级定义，直至全局。下面我们通过一个简单的例子来解释 Scope。

##### 清单 5. LESS 文件 #####

@width : 20px; 
     #homeDiv { 
       @width : 30px; 
       #centerDiv{ 
           width : @width;// 此处应该取最近定义的变量 width 的值 30px 
                  } 
     } 
     #leftDiv { 
         width : @width; // 此处应该取最上面定义的变量 width 的值 20px 
    
     }

经过编译生成的 CSS 文件如下：

##### 清单 6. CSS 文件 #####

#homeDiv #centerDiv { 
      width: 30px; 
     } 
     #leftDiv { 
      width: 20px; 
     }

### Mixins（混入） ###

Mixins（混入）功能对用开发者来说并不陌生，很多动态语言都支持 Mixins（混入）特性，它是多重继承的一种实现，在 LESS 中，混入是指在一个 CLASS 中引入另外一个已经定义的 CLASS，就像在当前 CLASS 中增加一个属性一样。

我们先简单看一下 Mixins 在 LESS 中的使用：

##### 清单 7. LESS 文件 #####

// 定义一个样式选择器
     .roundedCorners(@radius:5px) { 
     -moz-border-radius: @radius; 
     -webkit-border-radius: @radius; 
     border-radius: @radius; 
     } 
     // 在另外的样式选择器中使用
     #header { 
     .roundedCorners; 
     } 
     #footer { 
     .roundedCorners(10px); 
     }

经过编译生成的 CSS 文件如下：

##### 清单 8. CSS 文件 #####

#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 还有一种形式叫做 Parametric Mixins（混入参数），LESS 也支持这一特性：

##### 清单 9. LESS 文件 #####

// 定义一个样式选择器
     .borderRadius(@radius){ 
     -moz-border-radius: @radius; 
     -webkit-border-radius: @radius; 
     border-radius: @radius; 
     } 
     // 使用已定义的样式选择器
     #header { 
     .borderRadius(10px); // 把 10px 作为参数传递给样式选择器
     } 
     .btn { 
     .borderRadius(3px);// // 把 3px 作为参数传递给样式选择器
    
     }

经过编译生成的 CSS 文件如下：

##### 清单 10. CSS 文件 #####

#header { 
     -moz-border-radius: 10px; 
     -webkit-border-radius: 10px; 
     border-radius: 10px; 
     } 
     .btn { 
     -moz-border-radius: 3px; 
     -webkit-border-radius: 3px; 
     border-radius: 3px; 
     }

我们还可以给 Mixins 的参数定义一人默认值，如

##### 清单 11. LESS 文件 #####

.borderRadius(@radius:5px){ 
     -moz-border-radius: @radius; 
     -webkit-border-radius: @radius; 
     border-radius: @radius; 
     } 
     .btn { 
     .borderRadius; 
     }

经过编译生成的 CSS 文件如下：

##### 清单 12. CSS 文件 #####

.btn { 
     -moz-border-radius: 5px; 
     -webkit-border-radius: 5px; 
     border-radius: 5px; 
     }

像 JavaScript 中 **arguments**一样，Mixins 也有这样一个变量：**@arguments**。@arguments 在 Mixins 中具是一个很特别的参数，当 Mixins 引用这个参数时，该参数表示所有的变量，很多情况下，这个参数可以省去你很多代码。

##### 清单 13. LESS 文件 #####

.boxShadow(@x:0,@y:0,@blur:1px,@color:#000){ 
     -moz-box-shadow: @arguments; 
     -webkit-box-shadow: @arguments; 
     box-shadow: @arguments; 
     } 
     #header { 
     .boxShadow(2px,2px,3px,#f36); 
     }

经过编译生成的 CSS 文件如下：

##### 清单 14. CSS 文件 #####

#header { 
     -moz-box-shadow: 2px 2px 3px #FF36; 
     -webkit-box-shadow: 2px 2px 3px #FF36; 
     box-shadow: 2px 2px 3px #FF36; 
     }

Mixins 是 LESS 中很重要的特性之一，我们这里也写了很多例子，看到这些例子你是否会有这样的疑问：当我们拥有了大量选择器的时候，特别是团队协同开发时，如何保证选择器之间重名问题？如果你是 java 程序员或 C++ 程序员，我猜你肯定会想到命名空间 Namespaces，LESS 也采用了命名空间的方法来避免重名问题，于是乎 LESS 在 mixins 的基础上扩展了一下，看下面这样一段代码：

##### 清单 15. LESS 文件 #####

#mynamespace { 
     .home {...} 
     .user {...} 
     }

这样我们就定义了一个名为 mynamespace 的命名空间，如果我们要复用 user 这个选择器的时候，我们只需要在需要混入这个选择器的地方这样使用就可以了。\#mynamespace > .user。

### 嵌套的规则 ###

在我们书写标准 CSS 的时候，遇到多层的元素嵌套这种情况时，我们要么采用从外到内的选择器嵌套定义，要么采用给特定元素加 CLASS 或 ID 的方式。在 LESS 中我们可以这样写：

##### 清单 16. HTML 片段 #####

<div id="home"> 
     <div id="top">top</div> 
     <div id="center"> 
     <div id="left">left</div> 
     <div id="right">right</div> 
     </div> 
     </div>

##### 清单 17. LESS 文件 #####

#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 文件如下：

##### 清单 18. CSS 文件 #####

#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 结构相对应的，这样使我们的样式表书写更加简洁和更好的可读性。同时，嵌套规则使得对伪元素的操作更为方便。

##### 清单 19. LESS 文件 #####

a { 
     color: red; 
     text-decoration: none; 
     &:hover {// 有 & 时解析的是同一个元素或此元素的伪类，没有 & 解析是后代元素
      color: black; 
      text-decoration: underline; 
     } 
     }

经过编译生成的 CSS 文件如下：

##### 清单 20. CSS 文件 #####

a { 
     color: red; 
     text-decoration: none; 
     } 
     a:hover { 
     color: black; 
     text-decoration: underline; 
     }

### 运算及函数 ###

在我们的 CSS 中充斥着大量的数值型的 value，比如 color、padding、margin 等，这些数值之间在某些情况下是有着一定关系的，那么我们怎样利用 LESS 来组织我们这些数值之间的关系呢？我们来看这段代码：

##### 清单 21 . LESS 文件 #####

@init: #111111; 
     @transition: @init*2; 
     .switchColor { 
     color: @transition; 
     }

经过编译生成的 CSS 文件如下：

##### 清单 22. CSS 文件 #####

.switchColor { 
      color: #222222; 
     }

上面的例子中使用 LESS 的 operation 是 特性，其实简单的讲，就是对数值型的 value（数字、颜色、变量等）进行加减乘除四则运算。同时 LESS 还有一个专门针对 color 的操作提供一组函数。下面是 LESS 提供的针对颜色操作的函数列表：

lighten(@color, 10%); // return a color which is 10% *lighter* than @color 
     darken(@color, 10%); // return a color which is 10% *darker* than @color 
     saturate(@color, 10%); // return a color 10% *more* saturated than @color 
     desaturate(@color, 10%);// return a color 10% *less* saturated than @color 
     fadein(@color, 10%); // return a color 10% *less* transparent than @color 
     fadeout(@color, 10%); // return a color 10% *more* transparent than @color 
     spin(@color, 10); // return a color with a 10 degree larger in hue than @color 
     spin(@color, -10); // return a color with a 10 degree smaller hue than @color

PS: 上述代码引自 LESS CSS 官方网站，详情请见 [ http://lesscss.org/\#-color-functions][http_lesscss.org_-color-functions]

使用这些函数和 JavaScript 中使用函数一样。

##### 清单 23 LESS 文件 #####

init: #f04615; 
     #body { 
      background-color: fadein(@init, 10%); 
     }

经过编译生成的 CSS 文件如下：

##### 清单 24. CSS 文件 #####

#body { 
      background-color: #f04615; 
     }

从上面的例子我们可以发现，这组函数像极了 JavaScript 中的函数，它可以被调用和传递参数。这些函数的主要作用是提供颜色变换的功能，先把颜色转换成 HSL 色，然后在此基础上进行操作，LESS 还提供了获取颜色值的方法，在这里就不举例说明了。

LESS 提供的运算及函数特性适用于实现页面组件特性，比如组件切换时的渐入渐出。

### Comments（注释） ###

适当的注释是保证代码可读性的必要手段，LESS 对注释也提供了支持，主要有两种方式：单行注释和多行注释，这与 JavaScript 中的注释方法一样，我们这里不做详细的说明，只强调一点：LESS 中单行注释 (// 单行注释 ) 是不能显示在编译后的 CSS 中，所以如果你的注释是针对样式说明的请使用多行注释。

### LESS VS SASS ###

同类框架还有 SASS : [ http://sass-lang.com/][http_sass-lang.com], 与 LESS 相比，两者都属于 CSS 预处理器，功能上大同小异，都是使用类似程序式语言的方式书写 CSS, 都具有变量、混入、嵌套、继承等特性，最终目的都是方便 CSS 的书写及维护。

LESS 和 SASS 互相促进互相影响，相比之下 LESS 更接近 CSS 语法，更多两者之间的比较，请参考这篇帖子：[https://gist.github.com/674726][https_gist.github.com_674726]。

[Node.js]: http://www.oschina.net/p/nodejs
[Less]: http://lesscss.org/
[node.js]: http://nodejs.org/
[Clean CSS]: https://github.com/GoalSmashers/clean-css
[Link 1]: https://github.com/less/less-plugin-clean-css
[Link 2]: http://www.css88.com/doc/less/usage/index.html
[Usage]: http://lesscss.cn/usage/index.html
[http_lesscss.org_-color-functions]: http://lesscss.org/#-color-functions
[http_sass-lang.com]: http://sass-lang.com/
[https_gist.github.com_674726]: https://gist.github.com/674726