快速入门

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. ARM 汇编的mov操作立即数的疑问

    1. 因为对arm汇编有些指令还不能理解,特别是一些相似功能指令间的区别.偶然在网上搜到"faq ARM assembly",其中描述的几个问题还是值得好好研究一下. 2. 慢慢的 ...

  2. （转）Unity3D研究院之手游开发中所有特殊的文件夹（assetbundle与Application.persistentDataPath）

    这里列举出手游开发中用到了所有特殊文件夹. 1.Editor Editor文件夹可以在根目录下,也可以在子目录里,只要名子叫Editor就可以.比如目录:/xxx/xxx/Editor  和 /Edi ...

  3. python命令行参数传递JSON串

    有点小问题,一是传递的双引号被自动删除了,但是如果用单引号,JSON解析又不认. 所以,最后的方案是,传递单引号,但程序处理时做一个替换,替换成单引号.

  4. Springboot项目启动报错，提示Cannot determine embedded database driver class for database type NONE

    我在springboot项目里面引入了数据库的配置: <dependency> <groupId>org.mybatis.spring.boot</groupId> ...

  5. 如何在onCreate方法中获取视图的宽度和高度

    你可以通过视图的getWidth()和getHeight()来获取视图的宽度和高度. 但是,可能会让你失望的是,如果你直接在onCreate方法内调用这两个函数,你会的到0. 为什么呢? 这是因为,当 ...

  6. SQL Server 之 附加数据库出现“ 拒绝访问 ”

    错误信息如下图所示,附加数据库时出现“拒绝访问”:   解决方案: 修改拒绝访问的文件的安全权限,这里是修改数据库的.mdf文件的安全权限.

  7. 如何导入外部Git仓库到中国源代码托管平台（Git@OSC）

    git clone --bare http://git.rcrtm.com/git/dianli.git git clone --mirror https://git.oschina.net/cand ...

  8. directive完成UI渲染后执行JS

    ui-view有相应的$viewContentLoaded http://blog.csdn.net/xinshangshangxin/article/details/44700813 ng-repe ...

  9. Endorsement 业务逻辑介绍

    本文主要介绍保单系统中Endorsement功能的基本逻辑和过程,主要参考OIC系统 保单系统 保险公司用来管理保单的信息系统,这里简称为保单系统.主要作用是收集和维护投保人信息和投保信息,计算保费, ...

  10. 【Zookeeper】源码分析之持久化（二）之FileSnap

    一.前言 前篇博文已经分析了FileTxnLog的源码,现在接着分析持久化中的FileSnap,其主要提供了快照相应的接口. 二.SnapShot源码分析 SnapShot是FileTxnLog的父类 ...