less官方介绍文档（http://lesscss.org/#docs）

Getting Started

Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themeable and extendable.

Less runs inside Node, in the browser and inside Rhino. There are also many 3rd party tools that allow you to compile your files and watch for changes. The quickest place for first experiments with less is our online editor.

For example:

@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%) }

}

compiles to

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

}

Using Less

Less can be used on the command line via npm, downloaded as a script file for the browser or used in a wide variety of third party tools. See the Usage section for more detailed information.

Installation

The easiest way to install Less on the server, is via npm, the node.js package manager, as so:

$ npm install -g less

Command-line Usage

Once installed, you can invoke the compiler from the command-line, as such:

$ lessc styles.less

This will output the compiled CSS to stdout. To save the CSS result to a file of your choice use:

$ lessc styles.less styles.css

To output minified CSS you can use the clean-css plugin. When the plugin is installed, a minified CSS output is specified with --clean-css option:

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

To see all the command line options run lessc without parameters or see Usage.

Usage in Code

You can invoke the compiler from node, as such:

var less = require('less');

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

  console.log(output.css);

});

which will output

.class {

  width: 2;

}

Configuration

You may pass some options to the compiler:

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

    });

See Usage for more information.

Third Party Tools

See the Usage section for details of other tools.

Client-side Usage

Using less.js in the browser is great for development, but it's not recommended for production

Client-side is the easiest way to get started and good for developing with Less, but in production, when performance and reliability is important, we recommend pre-compiling using node.js or one of the many third party tools available.

To start off, link your .less stylesheets with the rel attribute set to "stylesheet/less":

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

Next, download less.js and include it in a <script></script> tag in the <head> element of your page:

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

Tips

  • Make sure you include your stylesheets before the script.
  • When you link more than one .less stylesheet each of them is compiled independently. So any variables, mixins or namespaces you define in a stylesheet are not accessible in any other.
  • Due to the same origin policy of browsers loading external resources requires enabling CORS

Browser Options

Options are defined by setting them on a global less object before the <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>

Or for brevity they can be set as attributes on the script and link tags (requires JSON.parse browser support or 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">

Learn more about Browser Options

Get Less.js

Browser downloads

Download Less.js v2.7.2

Download Source Code

Get the latest Less.js source code by downloading it directly from GitHub.

Clone or Fork via GitHub

Fork the project and send us a pull request!

Install with Bower

Install the Less.js project and JavaScript by running the following in the command line:

bower install less

Less CDN

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>

License FAQs

Less.js is released under the Apache 2 License (though there are plans to dual license it). Copyright 2009-2017, Alexis Sellier and the Less Core Team (see about). Boiled down to smaller chunks, it can be described with the following conditions.

It allows you to:

  • Freely download and use Less.js, in whole or in part, for personal, company internal or commercial purposes
  • Use Less.js in packages or distributions that you create

It forbids you to:

  • Redistribute any piece of Less.js without proper attribution

It requires you to:

  • Include a copy of the license in any redistribution you may make that includes Less.js
  • Provide clear attribution to The Less Core Team for any distributions that include Less.js

It does not require you to:

  • Include the source of Less.js itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it
  • Submit changes that you make to Less.js back to the Less.js project (though such feedback is encouraged)

The full Less.js license is located in the project repository for more information.

LESS文档的更多相关文章

  1. C#给PDF文档添加文本和图片页眉

    页眉常用于显示文档的附加信息,我们可以在页眉中插入文本或者图形,例如,页码.日期.公司徽标.文档标题.文件名或作者名等等.那么我们如何以编程的方式添加页眉呢?今天,这篇文章向大家分享如何使用了免费组件 ...

  2. dotNET跨平台相关文档整理

    一直在从事C#开发的相关技术工作,从C# 1.0一路用到现在的C# 6.0, 通常情况下被局限于Windows平台,Mono项目把我们C#程序带到了Windows之外的平台,在工作之余花了很多时间在M ...

  3. ABP文档 - Javascript Api - AJAX

    本节内容: AJAX操作相关问题 ABP的方式 AJAX 返回信息 处理错误 HTTP 状态码 WrapResult和DontWrapResult特性 Asp.net Mvc 控制器 Asp.net ...

  4. ABP文档 - EntityFramework 集成

    文档目录 本节内容: Nuget 包 DbContext 仓储 默认仓储 自定义仓储 特定的仓储基类 自定义仓储示例 仓储最佳实践 ABP可使用任何ORM框架,它已经内置了EntityFrame(以下 ...

  5. ABP文档 - SignalR 集成

    文档目录 本节内容: 简介 安装 服务端 客户端 连接确立 内置功能 通知 在线客户端 帕斯卡 vs 骆峰式 你的SignalR代码 简介 使用Abp.Web.SignalR nuget包,使基于应用 ...

  6. ABP文档 - 通知系统

    文档目录 本节内容: 简介 发送模式 通知类型 通知数据 通知重要性 关于通知持久化 订阅通知 发布通知 用户通知管理器 实时通知 客户端 通知存储 通知定义 简介 通知用来告知用户系统里特定的事件发 ...

  7. ABP文档 - Hangfire 集成

    文档目录 本节内容: 简介 集成 Hangfire 面板授权 简介 Hangfire是一个综合的后台作业管理器,可以在ABP里集成它替代默认的后台作业管理器,你可以为Hangfire使用相同的后台作业 ...

  8. ABP文档 - 后台作业和工作者

    文档目录 本节内容: 简介 后台作业 关于作业持久化 创建一个后台作业 在队列里添加一个新作业 默认的后台作业管理器 后台作业存储 配置 禁用作业执行 Hangfire 集成 后台工作者 创建一个后台 ...

  9. ABP文档 - Javascript Api

    文档目录 本节内容: AJAX Notification Message UI Block & Busy Event Bus Logging Other Utility Functions A ...

  10. ABP文档 - 导航

    文档目录 本节内容: 创建菜单 注册导航供应器 显示菜单 每个web应用都有一些菜单用来在页面/屏幕之间导航,ABP提供了一个通用的基础框架创建并显示菜单给用户. 创建菜单 一个应用可能由不同模块组成 ...

随机推荐

  1. jmeter问题处理随笔1 - 自动遍历用例（一次）

    背景: 弄了个无业务关联的巡检接口方案,需要循环获取csv中的数据,每一条数据,运行一次,直到全部运行完,但是使用后发现要通过[线程组]中设置循环变量的数据为来读取csv中的数据,这样每次修改csv用 ...

  2. 可存放任意类型变量的动态数组--C语言实现

    之前在训练营的时候被要求用C语言实现一个可以存放任意类型数据的栈.现在尝试实现一个数组版本. 首先用到的结构体如下(接触了Win32编程所以长得有点像里面的那些类型): typedef struct ...

  3. Spring源码情操陶冶-AbstractApplicationContext#invokeBeanFactoryPostProcessors

    阅读源码有利于陶冶情操,承接前文Spring源码情操陶冶-AbstractApplicationContext#postProcessBeanFactory 约定:web.xml中配置的context ...

  4. 【分享】01. Eclipse for PHP + phpStudy 搭建php开发环境

    配置php编译器 配置phpStudy服务器项目发布目录 修改hosts文件127.0.0.1      www.350zx.cn 新建项目 启动的你的phpStudy  

  5. SpringBoot填坑系列---XML方式配置数据库

    本次只是简单的运用SpringBoot搭建框架,对其原理并不做深入的探究 1.POM文件 <?xml version="1.0" encoding="UTF-8&q ...

  6. 模拟生产搭建Standby RAC实验环境(11.2.0.4 DG)

    模拟生产搭建Standby RAC实验环境(11.2.0.4 DG) 环境:RHEL 6.5 + Oracle 11.2.0.4 GI.DB 1.需求背景介绍 2.准备工作 3.主库配置 4.备库配置 ...

  7. 【思维】【水】 南阳oj 喷水装置（一）

    描述 现有一块草坪,长为20米,宽为2米,要在横中心线上放置半径为Ri的喷水装置,每个喷水装置的效果都会让以它为中心的半径为实数Ri(0<Ri<15)的圆被湿润,这有充足的喷水装置i(1& ...

  8. 数据结构二叉树的所有基本功能实现。(C++版）

    本人刚学数据结构,对树的基本功能网上找不到C++代码 便自己写了一份,贴出方便大家进行测试和学习. 大部分功能未测试,如有错误或者BUG,请高手们指教一下,谢谢. 结点声明: BinTreeNode. ...

  9. Sublime Text3快捷键

    Ctrl+D 选词 (反复按快捷键,即可继续向下同时选中下一个相同的文本进行同时编辑)Ctrl+G 跳转到相应的行Ctrl+J 合并行(已选择需要合并的多行时)Ctrl+L 选择整行(按住-继续选择下 ...

  10. Linux误删C基本运行库libc.so.6处理方法

    1. libc.so.6介绍/usr/lib/libc.so.6是glibc的软链接,不同的平台可能路径会不一样.使用命令查看会看到: [root@farmer:~]$ls -l /lib/libc. ...