Less入门与安装(转)
快速入门
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 lessLess CDN 加速
CDN.
<script src="http://cdn.bootcss.com/less.js/1.7.0/less.min.js"></script>
本文转自：http://less.bootcss.com/
Less入门与安装(转)的更多相关文章
- Yeoman入门之安装及环境配置
Yeoman入门之安装及环境配置 http://blog.csdn.net/panlingfan/article/details/27345037 http://www.nodejs.orgYEOMA ...
- ES 入门之一 安装ElasticSearcha
安装ElasticSearcha 学习ES也有快一个月了,但是学习的时候一直没有总结.以前没有总结是因为感觉不会的很多,现在对ES有一点了解了.索性就从头从安装到使用ES做一个详细的总结,也分享给其他 ...
- Maven的安装、配置及使用入门+maven安装报错：JAVA_HOME【申明：来源于网络】
Maven的安装.配置及使用入门+maven安装报错:JAVA_HOME[申明:来源于网络] Maven的安装.配置及使用入门:http://www.cnblogs.com/dcba1112/arch ...
- Redis入门 -- Redis安装与配置
Redis入门 -- Redis安装与配置 Redis的安装 Redis的安装,我这里使用的是虚拟机. 为了让主机和虚拟机之间可以顺利通信,按照以下步骤进行: 1. 将网络连接模式改为桥接 2. re ...
- webpack快速入门——如何安装webpack及注意事项
1.window+R键,输入cmd打开命令行工具,输入 mkdir XXXX(XX:文件夹名): 2.cd XXX 进入刚刚创建好的文件夹里,输入cnpm install -g webpack (安装 ...
- golang语言入门及安装
golang语言入门及安装 go语言是google在2009年发布的开源编程语言使用Go编译的程序可以媲美C或C++代码的速度,而且更加安全.支持并行进程. 本次讲解在windows上安装go语言的开 ...
- 01----python入门----python安装与初识
----python入门----python安装与初识 python是一门编程语言,作为学习python的开始,需要事先搞明白:编程的目的是什么?什么是编程语言?什么是编程? 这是一个很好的开头!但是 ...
- docker入门_docker安装
docker入门_docker安装 ubuntu 安装 curl -sSL https://get.daocloud.io/docker | sh # 官方安装脚本自动安装 systemctl ena ...
- [译]：Orchard入门——手动安装Orchard
原文链接:Manually Installing Orchard 文章内容基于Orchard 1.8版本 本文将演示通过zip安装包安装Orchard所需要的步骤. 本文包括如下三种不同的Orchar ...
- Redis快速入门：安装、配置和操作
本文是有关Redis的系列技术文章之一.在之前的文章中介绍了<Redis快速入门:初识Redis>,对Redis有了一个初步的了解.今天继续为大家介绍Redis如何安装.配置和操作. 系列 ...
随机推荐
- Java:Linux上java -jar xxx.jar&java -cp 区别
java -cp java -cp 和 -classpath 一样,是指定类运行所依赖其他类的路径,通常是类库和jar包,需要全路径到jar包,多个jar包之间连接符:window上分号“;”.Lin ...
- TeamView提示商业用途禁止使用
一.问题 TM被提示商业用途,用一会就断开连接,或者是提示五分钟后关闭 二.解决思路 2.1:删除原来的TM信息 首先需要卸载TM,其次需要去注册表,运行→regedit,打开注册表,删除相关的tea ...
- python绘制很美丽的图表
或许你会觉得python不适合做图形界面的开发,的确如此.可是python却有一个非常美丽的图标模块:pycha,废话少说,先上图,各位看一下. 是不是效果还不错呢,当然这仅仅是一小部分图表,还有其它 ...
- dynamic(2) – ExpandoObject的使用
一,ExpandoObject使用场合 在传递对象,但是又不想创建一个class或者struct的时候,ExpandoObject就是一个非常好的选择. 假如我们有一个SendMail的函数,功能是发 ...
- 学习 Linux，302（混合环境）: Samba 角色
http://www.ibm.com/developerworks/cn/linux/l-lpic3-310-2/ 概述 在本文中,了解下列概念: Samba 安全模式 核心 Samba 守护程序的角 ...
- 算法笔记_203:第四届蓝桥杯软件类决赛真题(C语言B组)
目录 1 猜灯谜 2 连续奇数和 3 空白格式化 4 高僧斗法 5 格子刷油漆 6 农场阳光 前言:以下代码仅供参考,若有错误欢迎指正哦~ 1 猜灯谜 标题:猜灯谜 A 村的元宵节灯会上有一迷题: ...
- 数据库查询语句报错-ORA-00911: invalid character
数据库查询语句报错-ORA-00911: invalid character 根据自己经验总结下: 1.都是分号惹的祸,有时候sql语句后面有分好导致这种错误 2.还有一种是从别处copy过来的sql ...
- 使用c语言调用python小结
近期在做一个漏洞展示平台,攻击实现部分使用python实现.c语言实现部分使用libcli库做一个类似telnet的东东,回调函数run的时候调用python模块. 针对c调用python,做个了小d ...
- 【PMP】三点估算法
通过考虑估算中的不确定性和风险,可以提高持续时间估算的准确性. 最可能时间(tM):基于最可能获得的资源.最可能取得的资源生产率.对资源可用时间的现实预计,资源对其他参与者的可能依赖关系及可能发生的各 ...
- Knockout学习之控制流绑定器
控制流绑定器 “foreach”绑定 顾名思义,通过该绑定我们就可以将监控数组循环输出到页面中去了,当然我们还是先来段简单的示例,仅仅只是输出监控数组: <ul data-bind=" ...