Less使用说明
使用koala编译
Koala 是一款由国人开发的开源预处理语言图形编译工具,目前已支持 Less、Sass、Compass 与CoffeeScript。
目前支持以下系统:Windows,Mac, 10.7+,Linux: 32bit / 64bit,Ubuntu: 32bit / 64bit;
我们可以从他们官方网站下载 koala:点击进入,使用文档点击进入
使用方法:
安装完成后打开 Koala,把文件夹拖入界面或者是在左侧加号处选择文件夹,此时在界面左边有文件夹路径产生。
同时有 less 文件将显示在界面中间,右键文件选择输出 CSS 文件的路径。
左键点击 less 文件在右边则有功能选项栏弹出,下面将介绍功能。
功能介绍:
自动编译(实时编译):
当开启自动编译时,使用编辑器按下 Ctrl+S 保存时,CSS 文档会自动更新。如果没有打开这个功能,那么需要使用者在自行点击"执行编译"才更新 CSS 文档。
编译选项:
- 行注释(line comments):这个功能会在 css 文件里对应的 less 编译出来的 css 代码上方提供一个注释。注释的内容分别说明来自 less 的第几行开始,同时标明是来自那个 less 文件。
调试信息(debug info):这个调试功能是在保存时自动检测有无错误,注意实时编译关闭时不会开启,需要在你执行时才弹出错误。所以,建议开启实时编译。目前调试功能仅能检测出一些影响编译的错误:例如没有带{}、没带分号。这些错误,而有没有使用选择器或者样式输入错误则不会提示。
输出方式(代码压缩):
- 正常(normal):顾名思义,就是不压缩。
- 压缩(compress):顾名思义,就是压缩。
- YUI压缩(YUIcompress):使用 YUI 的压缩打包工具进行压缩。
Node.js命令行中使用
安装
在Node.js中安装LESS最简单的方式就是使用Node包管理工具npm来安装:
npm install -g less
如果你使用Mac或者Linux,可能需要使用管理员身份安装:
sudo npm install -g less
在命令行中使用
一旦安装完成,就可以在命令行中调用,例如:
lessc styles.less
这样的话编译后的CSS将会输出到stdout中,你可以选择将这个输出重定向到文件中:
lessc styles.less > styles.css
如果你想输出一个压缩后的CSS,只要加到-x
选项即可。如果你想要更NB的压缩,你也可以选择使用YUI CSS压缩器,只要加上--yui-compress
选项即可。
直接运行lessc,不带任何参数将可以看到所有的命令行参数。
在Node.js代码中使用
你可以在Node中调用编译器,例如:
var less = require('less');
less.render('.class { width: (1 + 1) }', function (e, css) {
console.log(css);
});
将会输出
.class {
width: 2;
}
你也可以手工调用解析器和编译器:
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'], // 指定@import搜索的目录
filename: 'style.less' // 为了更好地输出错误信息,可以指定一个文件名
});
parser.parse('.class { width: (1 + 1) }', function (e, tree) {
tree.toCSS({ compress: true }); // 压缩输出的CSS
});
浏览器端使用
你也可以直接在浏览器中使用LESS,详情请查看这里。
Less使用说明的更多相关文章
- Atitit.项目修改补丁打包工具 使用说明
Atitit.项目修改补丁打包工具 使用说明 1.1. 打包工具已经在群里面.打包工具.bat1 1.2. 使用方法:放在项目主目录下,执行即可1 1.3. 打包工具的原理以及要打包的项目列表1 1. ...
- awk使用说明
原文地址:http://www.cnblogs.com/verrion/p/awk_usage.html Awk使用说明 运维必须掌握的三剑客工具:grep(文件内容过滤器),sed(数据流处理器), ...
- “我爱背单词”beta版发布与使用说明
我爱背单词BETA版本发布 第二轮迭代终于画上圆满句号,我们的“我爱背单词”beta版本已经发布. Beta版本说明 项目名称 我爱背单词 版本 Beta版 团队名称 北京航空航天大学计算机学院 拒 ...
- Oracle 中 union 和union all 的简单使用说明
1.刚刚工作不久,经常接触oracle,但是对oracle很多东西都不是很熟.今天我们来了解一下union和union all的简单使用说明.Union(union all): 指令的目的是将两个 S ...
- Map工具系列-02-数据迁移工具使用说明
所有cs端工具集成了一个工具面板 -打开(IE) Map工具系列-01-Map代码生成工具说明 Map工具系列-02-数据迁移工具使用说明 Map工具系列-03-代码生成BySQl工具使用说明 Map ...
- Map工具系列-03-代码生成BySQl工具使用说明
所有cs端工具集成了一个工具面板 -打开(IE) Map工具系列-01-Map代码生成工具说明 Map工具系列-02-数据迁移工具使用说明 Map工具系列-03-代码生成BySQl工具使用说明 Map ...
- jQuery验证控件jquery.validate.js使用说明
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...
- gdbsever 使用说明
gdbsever 使用说明 在新塘N3292x平台下 编译 gdbsever ./configure --target=arm-linux --host=arm-linux arm-linux-gdb ...
- mongoVUE的增删改查操作使用说明
mongoVUE的增删改查操作使用说明 一. 查询 1. 精确查询 1)右键点击集合名,再左键点击Find 或者直接点击工具栏上的Find 2)查询界面,包括四个区域 {Find}区,查询条件格式{& ...
- jQuery验证控件jquery.validate.js使用说明+中文API
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 学习 ...
随机推荐
- mac air 装ubuntu16.04
前言 我的mac air购于14年,128GB款.最开始我只是在OS X系统里留出了70GB给ubuntu,然后通过u盘装了ubuntu 14.04,后来又陆续将系统升级到15.04.16.04.各方 ...
- 5.flask知识点补充
1.WTForms表单验证基本使用 flask-wtf是一个简化了WTForms操作的一个第三方库,WTForms表单的两个主要的功能jiushi就是验证用户提交数据的合法性以及渲染模板.当然还包括其 ...
- Python/CMD 文件备份
1.使用Python压缩文件并另存 import zipfile, os #备份文件ZIP格式: folder 目标文件夹 : Targetfolder:另存地址 def backuptozip(fo ...
- git常用命令收集
[git远程操作命令] 1.$ git remote –v #查看本地配置的所有远程仓库,内容为远程仓库的地址和本地别名 harvey@harvey:~/node$ git remote -v nod ...
- 【 Zabbix 】 — 基础安装
一.基础环境 (1)centos6.7 x64 (2)JDK1.8 and zabbix-2.4.8(JDK是为了后期可以监控tomcat) (3)虚拟机测试环境 二.安装LAMP环境 这里为了快速搭 ...
- 项目问题整理(it)
1,很(屎)优(一)雅(样)的IE9兼容问题: --webuploader在webkit浏览器中自动使用h5上传,但在IE中需要配置支持flash,特别注意两点: ①Upload.swf路径问题不正确 ...
- Selenium2+python自动化63-简易项目搭建【转载】
前言 到unittest这里基本上可以搭建一个简易的项目框架了,我们可以用一条run_main.py脚本去控制执行所有的用例,并生成报告,发送邮件一系列的动作 一.新建工程 1.打开pycharm左上 ...
- [BZOJ2151] 种树 贪心
2151: 种树 Time Limit: 10 Sec Memory Limit: 259 MBSubmit: 1151 Solved: 613[Submit][Status][Discuss] ...
- Linux命令之halt、poweroff、reboot
halt [选项] poweroff [选项] reboot [选项] 这三个命令模式一样,目的是引导内核启动或停止系统的运行:当没有-f参数或系统运行级别不是0和6,将执行/sbin/shutdow ...
- 17、Flask实战第17天:Flask-cookie
cookie的基本概念 在网站中,http请求是无状态的.也就是说即使第一次和服务器连接并且登录成功后,第二次请求服务器依然不能知道当前请求的是哪个用户. cookie的出现就是为了解决这个问题,第一 ...