快速入门

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. Linux下逻辑地址-线性地址-物理地址图解(转)

    一.逻辑地址转线性地址 机器语言指令中出现的内存地址,都是逻辑地址,需要转换成线性地址,再经过MMU(CPU中的内存管理单元)转换成物理地址才能够被访问到. 我们写个最简单的hello world程序 ...

  2. Android 自定义 ListView 上下拉动“刷新最新”和“加载更多”歌曲列表

    本文内容 环境 测试数据 项目结构 演示 参考资料 本文演示,上拉刷新最新的歌曲列表,和下拉加载更多的歌曲列表.所谓"刷新最新"和"加载更多"是指日期.演示代码 ...

  3. 【医疗行业】关于dcm4che DICOM Toolkit：C-Move与C-Get

    在医学影像领域,DICOM标准与dcm4che的重要性毋庸置疑.幸好,这些开源的dcm4che DICOM 工具包,能对我们提供不少帮助. 在这里有很多的工具: Sources: https://gi ...

  4. Dicom格式文件解析器[转]

    Dicom格式文件解析器   Dicom全称是医学数字图像与通讯,这里讲的暂不涉及通讯那方面的问题 只讲*.dcm 也就是diocm格式文件的读取,读取本身是没啥难度的 无非就是字节码数据流处理.只不 ...

  5. JERSEY中文翻译（第一章、Getting Started、1.1.7）

    最近发现jersey特别流行,但是中文资料非常少,深感没有资料的痛苦,所以分享一下看到的内容供他人快速入门. 今天翻译第一章.Getting Started.https://jersey.java.n ...

  6. mybatis+spring配置

    可参考:http://www.javacodegeeks.com/2014/02/building-java-web-application-using-mybatis-with-spring.htm ...

  7. cmder、cmd、python 中文乱码问题

    cmd下echo中文没有问题,但是进入python模式后就中文乱码,cmder更是echo也乱码 其实是要配置默认code page, cmd默认是ansi的编码,中文自然乱码 CMD chcp 65 ...

  8. SpringMVC，Ehcache

    来自:http://blog.csdn.net/jadyer/article/details/12257865 http://jinnianshilongnian.iteye.com/blog/200 ...

  9. JAVA排序总结

    package com.softeem.jbs.lesson4; import java.util.Random; /** * 排序测试类 * * 排序算法的分类如下: * 1.插入排序(直接插入排序 ...

  10. JPress的CMS系统在Window下的部署和使用

    开始使用JPress系统的话首先要进入官网对其进行熟悉 官网网址如下:http://www.jpress.io/faq.html 然后是下载项目,项目下载地址是.https://gitee.com/f ...