Less 简介

来源：互联网发布：java应届自我介绍编辑：程序博客网时间：2024/05/01 18:16

Less 是一个Css 预编译器,意思指的是它可以扩展Css语言,添加功能如允许变量(variables),混合(mixins),函数(functions) 和许多其他的技术，让你的Css更具维护性，主题性，扩展性。

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

例如:

@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可以通过npm在命令行上使用，作为一个脚本文件浏览器或用于广泛的第三方工具下载。有关更多详细信息，参见用法部分。

Installation （安装）

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

$ npm install -g less

Command-line usage （在命令行中使用）

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

$ lessc styles.less

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

$ lessc styles.less > styles.css

如果你想输出一个压缩后的CSS，只要加到 -x 选项即可。如果你想要更NB的压缩，你也可以选择使用 Clean CSS 压缩器，只要加上 --clean-css 插件即可。

直接运行lessc，不带任何参数将可以看到所有的命令行参数或查看用法.

Usage in Code （在代码中使用）

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

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

将会输出

.class {  width: 2;}

Configuration （配置）

你可以给编译器传入一些参数：

var less = require('less');less.render('.class { width: (1 + 1) }',    {      paths: ['.', './lib'],  // Specify search paths for @import directives      filename: 'style.less', // Specify a filename, for better error messages      compress: true          // Minify CSS output    },    function (e, output) {       console.log(output.css);    });

查看用法获取更多信息。

Third party tools （第三方工具）

有关其他工具详细信息,参见用法部分。

Command-line With Rhino （使用Rhino命令行）

每个 less.js 发布都包含了对应的Rhino命令行版本。

Rhino命令行版本需要两个文件:

less-rhino-.js - 编译启动，
lessc-rhino-.js - 命令行支持。

Command to run the compiler:

java -jar js.jar -f less-rhino-<version>.js lessc-rhino-<version>.js styles.less styles.css

This will compile styles.less file and save the result to styles.css file. The output file parameter is optional. If it is missing, less will output the result to stdout.

Client-side usage （在客户端中使用）

在浏览器中使用less.js开发是很好的，但不推荐用于生产环境中。

浏览器端使用是在使用LESS开发时最直观的一种方式。如果是在生产环境中，尤其是对性能要求比较高的场合，建议使用node或者其它第三方工具先编译成CSS再上线使用。

首先，引入 rel 属性的值是 stylesheet/less 的 .less 样式表 :

<link rel="stylesheet/less" type="text/css" href="styles.less" />

接下来，下载 less.js 并将其包涵在您的页面 <head> 元素的 <script></script> 标记中：

<script src="less.js" type="text/javascript"></script>

Tips 特别注意

确保包涵 .less 样式表在 less.js 脚本 before
当你引入多个 .less 样式表时，它们都是独立编译的。所以，在每个文件中定义的变量、混合、命名空间都不会被其它的文件共享。

Browser Options （浏览器端设置参数）

你可以引入 <script src="less.js"></script> 之前通过创建一个全局 less 对象的方式来指定参数，例如：

<!-- set options before less.js script --><script>  less = {    env: "development",    async: false,    fileAsync: false,    poll: 1000,    functions: {},    dumpLineNumbers: "comments",    relativeUrls: false,    rootpath: ":/a.com/"  };</script><script src="less.js"></script>

或为了简化它们可以在 script 和 link 标记上设置属性（需要的JSON.parse浏览器支持或polyfill）。

<script src="less.js" data-poll="1000" data-relative-urls="false"></script><link data-dump-line-numbers="all" data-global-vars='{ myvar: "#ddffee", mystr: "\"quoted\"" }' rel="stylesheet/less" type="text/css" href="less/styles.less">

0 0