快速入门

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。

Less 可以运行在 Node、浏览器和 Rhino 平台上。网上有很多第三方工具帮助你编译 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

Less 可以通过 npm 在命令行上运行；在浏览器上作为脚本文件下载；或者集成在广大的第三方工具内。请参考 用法 。

安装

在服务器端最容易的安装方式就是通过 npm （node.js 的包管理器），方法如下：

$ npm install -g less

命令行用法

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

$ lessc styles.less

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

$ lessc styles.less > styles.css

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

执行 lessc 且不带任何参数，就会在命令行上输出所有可用选项的列表。

在代码中调用 Less

可以像下面这样在代码中调用 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());

});

配置

可以给编译器传递多个参数：

var parser = new(less.Parser)({

  paths: ['.', './lib'], // Specify search paths for @import directives

  filename: 'style.less' // Specify a filename, for better error messages

});

parser.parse('.class { width: (1 + 1) }', function (e, tree) {

  tree.toCSS({

    // Minify CSS output

    compress: true

  });

});

Grunt

Less 还和流行的 Grunt 构建工具进行了集成，可以参考 grunt-contrib-less 插件。

第三方工具

请参考 用法 一节了解其它工具的细节。

客户端用法

在浏览器上跑 less.js 非常方便开发，但是不推荐用于生产环境。

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

那就开始吧，在页面中加入 .less 样式表的链接，并将 rel 属性设置为 "stylesheet/less"：

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

接下来，下载 less.js 并通过 <script></script> 标签将其引入，放置于页面的 <head> 元素内：

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

提示

  • 务必确保在 less.js 之前加载你的样式表。
  • 如果加载多个 .less 样式表文件，每个文件都会被单独编译。因此，一个文件中所定义的任何变量、mixin 或命名空间都无法在其它文件中访问。

浏览器端设置参数

在 <script src="less.js"></script> 之前 定义全局的 less 对象就可以为 Less.js 设置参数：

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

浏览器端下载

下载源码

直接从 GitHub 上下载最新的 Less.js 源码。

通过 GitHub 克隆或 fork 本项目

通过 Bower 安装

通过 Bower 安装 Less.js 项目。

bower install less

Less CDN 加速

CDN.

<script src="http://cdn.bootcss.com/less.js/1.7.0/less.min.js"></script>

本文转自：http://less.bootcss.com/

Less入门与安装(转)的更多相关文章

  1. Yeoman入门之安装及环境配置

    Yeoman入门之安装及环境配置 http://blog.csdn.net/panlingfan/article/details/27345037 http://www.nodejs.orgYEOMA ...

  2. ES 入门之一 安装ElasticSearcha

    安装ElasticSearcha 学习ES也有快一个月了,但是学习的时候一直没有总结.以前没有总结是因为感觉不会的很多,现在对ES有一点了解了.索性就从头从安装到使用ES做一个详细的总结,也分享给其他 ...

  3. Maven的安装、配置及使用入门+maven安装报错：JAVA_HOME【申明：来源于网络】

    Maven的安装.配置及使用入门+maven安装报错:JAVA_HOME[申明:来源于网络] Maven的安装.配置及使用入门:http://www.cnblogs.com/dcba1112/arch ...

  4. Redis入门 -- Redis安装与配置

    Redis入门 -- Redis安装与配置 Redis的安装 Redis的安装,我这里使用的是虚拟机. 为了让主机和虚拟机之间可以顺利通信,按照以下步骤进行: 1. 将网络连接模式改为桥接 2. re ...

  5. webpack快速入门——如何安装webpack及注意事项

    1.window+R键,输入cmd打开命令行工具,输入 mkdir XXXX(XX:文件夹名): 2.cd XXX 进入刚刚创建好的文件夹里,输入cnpm install -g webpack (安装 ...

  6. golang语言入门及安装

    golang语言入门及安装 go语言是google在2009年发布的开源编程语言使用Go编译的程序可以媲美C或C++代码的速度,而且更加安全.支持并行进程. 本次讲解在windows上安装go语言的开 ...

  7. 01----python入门----python安装与初识

    ----python入门----python安装与初识 python是一门编程语言,作为学习python的开始,需要事先搞明白:编程的目的是什么?什么是编程语言?什么是编程? 这是一个很好的开头!但是 ...

  8. docker入门_docker安装

    docker入门_docker安装 ubuntu 安装 curl -sSL https://get.daocloud.io/docker | sh # 官方安装脚本自动安装 systemctl ena ...

  9. [译]：Orchard入门——手动安装Orchard

    原文链接:Manually Installing Orchard 文章内容基于Orchard 1.8版本 本文将演示通过zip安装包安装Orchard所需要的步骤. 本文包括如下三种不同的Orchar ...

  10. Redis快速入门：安装、配置和操作

    本文是有关Redis的系列技术文章之一.在之前的文章中介绍了<Redis快速入门:初识Redis>,对Redis有了一个初步的了解.今天继续为大家介绍Redis如何安装.配置和操作. 系列 ...

随机推荐

  1. Redis实战总结-Redis的高可用性

    在之前的博客<Redis实战总结-配置.持久化.复制>给出了一种Redis主从复制机制,简单地实现了Redis高可用.然后,如果Master服务器宕机,会导致整个Redis瘫痪,这种方式的 ...

  2. JavaScript 判断一个对象{}是否为空对象的简单方法

    第一种: function isEmptyObject(obj) { for (var key in obj) { //返回false,不为空对象 return false; } return tru ...

  3. ImageLoader初始化以及调用

    1.首先在当前程序的Application中调用ImageLoader的初始化init()方法 [java] view plain copy private void initImageLoader( ...

  4. C#.NET常见问题(FAQ)-控制台程序如何做弹窗

    最简单的弹窗,只要引用System.Windows.Forms,就可以使用WinForm的弹窗   如果要弹出是/否的选择对话框,则可以拷贝下面的代码 DialogResult dr = Messag ...

  5. [UIView setShowsFPS:]: unrecognized selector sent to instance XXX

    今天在做sprite Kit game时遇到一个问题. 新建一个项目运行时发现就加了这几句代码无法运行.后来一查原来是storyboard uiview要改一下.改成SKview In your st ...

  6. common.js 2017

    String.IsNullOrEmpty = function (v) { return !(typeof (v) === "string" && v.length ...

  7. 栈的实现与操作(C语言实现)

    栈的定义  1, 栈是一种特殊的线性表  2,栈仅能在线性表的一端进行操作  3,栈顶(Top): 同意操作的一端 同意操作的一端  4,栈底(Bottom): ,不同意操作的一端 不同意操作 ...

  8. web.xml关于spring的讲解

    <context-param>的作用: web.xml的配置中<context-param>配置作用 . 启动一个WEB项目的时候,容器(如:Tomcat)会去读它的配置文件w ...

  9. MongoDB副本集配置系列六：定位MongoDB慢的原因

    1:想知道哪些操作拖慢了MongoDB的速度,首先需要检查当前正在执行哪些操作. gechongrepl:PRIMARY> db.currentOp() "opid" : 7 ...

  10. sqlserver 表中记录生成insert，可以加条件，可以生成建表语句

    sqlserver 表中记录生成insert,可以加条件,可以生成建表语句 create PROCEDURE [sp_getinsert] ( ) , --如果非默认架构,可以加上架构名 例如:sch ...