文章目录
  1. 1. 使用Less(命令行用法)
    1. 1.1. 安装
    2. 1.2. 使用
  2. 2. Node代码中使用
  3. 3. 在浏览器中使用Less
    1. 3.0.1. Tips
  4. 3.1. 浏览器端设置参数
  5. 3.2. 参数说明

CSS(层叠样式表)是一门历史悠久的标记性语言,同 HTML 一道,被广泛应用于万维网(World Wide Web)中。HTML 主要负责文档结构的定义,CSS 负责文档表现形式或样式的定义。

作为一门标记性语言,CSS 的语法相对简单,对使用者的要求较低,但同时也带来一些问题:CSS 需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对于非前端开发工程师来讲,往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码,造成这些困难的很大原因源于 CSS 是一门非程序式语言,没有变量、函数、SCOPE(作用域)等概念。LESS 为 Web 开发者带来了福音,它在 CSS 的语法基础之上,引入了变量,Mixin(混入),运算以及函数等功能,大大简化了 CSS 的编写,并且降低了 CSS 的维护成本,就像它的名称所说的那样,LESS 可以让我们用更少的代码做更多的事情。

本文主要介绍less的用法,语言特性等和less相关的语法知识我们将会在接下来的blog中介绍。

Less 可运行在 Node 环境,浏览器环境和Rhino环境.因为我自己没有Rhino环境,所以主要介绍Node环境和浏览器环境下的使用。更多用法请参考Less.js: Getting started

使用Less(命令行用法)

安装

首先要确保已经安装好nodejs的环境,然后借助Node包管理工具npm来安装Less:

npm install -g less  //这是安装到全局使用的方式。

使用

安装 Less 后,就可以在命令行上调用 Less 编译器了,如下:

lessc styles.less

这将输出编译之后的 CSS 代码到 stdout,你可以将输出重定向到一个文件:

lessc styles.less > styles.css

若要输出压缩过的 CSS,只需添加 -x 选项。如果希望获得更好的压缩效果,还可以通过 –clean-css 选项启用 Clean CSS 进行压缩。

执行 lessc 且不带任何参数(或者-h, -help),就会在命令行上输出所有可用选项的列表。

lessc (-h/-help)

Node代码中使用

可以像下面这样在代码中调用 Less 编译器(Node 平台)

var less = require('less');

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

输出是:

.class {
  width: 2;
}

还可以手动调用分析器(paser)和编译器:

var parser = new(less.Parser);

parser.parse('.class { width: (1 + 1) }', function (err, tree) {
  if (err) {
    return console.error(err)
  }
  console.log(tree.toCSS());
});

在浏览器中使用Less

在客户端使用 Less.js 是最容易的方式,并且在开发阶段很方便,但是,在生产环境中,性能和可靠性非常重要,我们建议最好使用 node.js 或其它第三方工具进行预编译。

下载Less.js,然后在网页中加入如下代码:

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>

Tips

  1. 务必确保在 less.js 之前加载你的样式表。
  2. 如果加载多个 .less 样式表文件,每个文件都会被单独编译。因此,一个文件中所定义的任何变量、mixin 或命名空间都无法在其它文件中访问。
  3. 目前测试Less.js仅在Firefox运行正常,Chrome和IE均看不到效果哎。。

浏览器端设置参数

之前 定义全局的 less 对象就可以为 Less.js 设置参数:

<!-- set options before less.js script -->
<script>
  less = {
    env: "development",
    logLevel: 2,
    async: false,
    fileAsync: false,
    poll: 1000,
    functions: {},
    dumpLineNumbers: "comments",
    relativeUrls: false,
    globalVars: {
      var1: '"string value"',
      var2: 'regular value'
    },
    rootpath: ":/a.com/"
  };
</script>
<script src="less.js"></script>

参数说明

  1. async:用来判断是否异步导入文件,默认false
  2. dumpLineNumbers:当设置dumpLineNumbers直接输出源行信息到编译好的CSSS的文件中时,有利于你调试指定行。参数可选comments|mediaQuery|all

    comments参数用于输出用户可以理解的内容,而mediaQuery使用Firefox一个扩展来解析CSS和抽取信息。

  3. env:可以在development或是production环境下运行。

    在production环境下,CSS被缓存在本地,消息和信息不能输出到console。

    文档的URL开头是“file://”,或是在本地机器中,或是有不标准端口,env的参数将自动设置为development。

  4. errorReporting:在LESS编译失败时候,errorReporting会设置错误报告的方法。可选html/console/function,默认html。
  5. fileAsync:使用文件协议访问页面时异步加载导入的文件。默认false。
  6. functions:User functions, keyed by name. e.g.

    less = { functions: { myfunc: function() { return 1; }} };
    

    and it can be used like a native Less function e.g.

    .my-class {
      border-width: unit(myfunc(), px);
    }
    
  7. logLevel:javascript控制台日志量(错误等级)。注意:在production环境下,获取不到日志。默认是2

    2 - 提示信息(Information)和错误(errors)
    1 - 错误(Errors)
    0 - 空(Nothing)
    
  8. poll:在监视模式下,每两次请求之间的时间间隔(ms),默认1000。
  9. relativeUrls:是否调整相对路径。如果为false,则url已经是相对于入口的LESS文件。默认false
  10. globalVars:List of global variables to be injected into the code. Keys of the object are variables names, values are variables values. Variables of “string” type must explicity include quites.
  11. rootPath:添加到每个URL开始处的路径。
文章目录
  1. 1. 使用Less(命令行用法)
    1. 1.1. 安装
    2. 1.2. 使用
  2. 2. Node代码中使用
  3. 3. 在浏览器中使用Less
    1. 3.0.1. Tips
  4. 3.1. 浏览器端设置参数
  5. 3.2. 参数说明