快速入门

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. c语言统计程序执行时间

    c语言程序执行时间 #include <iostream> #include <cstdio> #include <ctime> int main() { std: ...

  2. 前端框架 Vue 初探

    一.前言 前几日使用微信网页版时,好奇这个网页用了什么前端框架.用Chrome的开发人员模式一探到底,发现原来用了一个名叫 Angular 的框架.好吧,既然微信用了.那我也最好还是看看.等等,你这篇 ...

  3. Get file extention in XSLT

      When working with data view web parts or data form web parts in SharePoint, you might want to use ...

  4. Mongo如何在多个字段中查询某个关键字?

    If a text index has multiple fields in Mongo, how can I do a search in only one field since the weig ...

  5. MySQL表级锁和行级锁

    一:概述 相对其他数据库而言,MySQL的锁机制比较简单,其最显著的特点是不同的存储引擎支持不同的锁机制.比如,MyISAM和MEMORY存储引擎采用的是表级锁(table-level locking ...

  6. [Functional Programming] Running though a serial number prediction functions for tagging, pairing the result into object

    Let's we have some prediction functions, for each prediction function has a corresponding tag: const ...

  7. wdcp下nginx+apache混合模式的主机配置

    /www/wdlinux/httpd-2.2.22/conf/vhost/xxx.xxx.com.conf <VirtualHost *:88>DocumentRoot /www/web/ ...

  8. Android 原生 Android ActionBar

    本文内容 关于 ActionBar 必要条件 项目结构 环境 演示一:Action Bar 显示隐藏 演示二:Action Item 显示菜单选项 演示三:Action Home 启用"返回 ...

  9. 解决IE6兼容性问题的十一大技巧

    10要点解决IE6兼容性问题 1.使用声明 你必须经常在html网页头部放置一个声明,推荐使用严格的标准.例如 <!DOCTYPEHTMLPUBLIC“-//W3C//DTDHTML4.01// ...

  10. asp.net判断文件或文件夹是否存在

    在上传文件时经常要判断文件夹是否存在,如果存在就上传文件,否则新建文件夹再上传文件 判断语句为 if (System.IO.Directory.Exists(Server.MapPath(" ...