web学习 -- less （CSS 预处理语言）

概述

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

less可以运行在node或浏览器端

less：

@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软件包管理器npm进行

$ npm install -g less

命令行用法

安装后，可以从命令行调用编译器

$ lessc styles.less

注：该方式会将编译后的css输出到stdout中

将css结果保存到选择的文件

$ lessc styles.less styles.css

输出缩小的内容，可以使用css使用clean-css plugin。
安装插件后使用 --clean-css选项指定缩小的css输出

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

代码用法

从节点中调用编译器

var less = require('less');

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

输出

.class {
  width: 2;
}

配置（将一些选项传递给编译器）

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

浏览器使用

注：在浏览器使用less.js非常适合开发，但不建议用于生产环境

客户端是最简单的入门方式，并且可以使用Less进行良好的开发，但是在生产中，当性能和可靠性很重要时，我们建议使用node.js或许多可用的第三方工具之一进行预编译
首先，将.less样式表的rel属性设置为“ stylesheet/less”：

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

接下来，下载less.js，并将其包含在页面元素中的标记中：

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

提示
确保在脚本之前包含样式表。
链接多个.less样式表时，每个样式表都是独立编译的。因此，您在样式表中定义的任何变量，mixin或名称空间均不可访问。
由于浏览器的原始策略相同，因此加载外部资源需要启用CORS
选项
通过在以下选项之前在全局less对象上设置选项来定义选项：<script src="less.js"></script>

<!-- 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>

为了简洁起见，可以将它们设置为脚本和链接标签上的属性（需要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">

下载