使用koala编译

Koala 是一款由国人开发的开源预处理语言图形编译工具,目前已支持 LessSassCompass 与CoffeeScript

目前支持以下系统:Windows,Mac, 10.7+,Linux: 32bit / 64bit,Ubuntu: 32bit / 64bit;

我们可以从他们官方网站下载 koala:点击进入,使用文档点击进入

使用方法:

  1. 安装完成后打开 Koala,把文件夹拖入界面或者是在左侧加号处选择文件夹,此时在界面左边有文件夹路径产生。

  2. 同时有 less 文件将显示在界面中间,右键文件选择输出 CSS 文件的路径。

  3. 左键点击 less 文件在右边则有功能选项栏弹出,下面将介绍功能。

功能介绍:

自动编译(实时编译):

当开启自动编译时,使用编辑器按下 Ctrl+S 保存时,CSS 文档会自动更新。如果没有打开这个功能,那么需要使用者在自行点击"执行编译"才更新 CSS 文档。

编译选项:

  1. 行注释(line comments):这个功能会在 css 文件里对应的 less 编译出来的 css 代码上方提供一个注释。注释的内容分别说明来自 less 的第几行开始,同时标明是来自那个 less 文件。
  2. 调试信息(debug info):这个调试功能是在保存时自动检测有无错误,注意实时编译关闭时不会开启,需要在你执行时才弹出错误。所以,建议开启实时编译。目前调试功能仅能检测出一些影响编译的错误:例如没有带{}、没带分号。这些错误,而有没有使用选择器或者样式输入错误则不会提示。

  3. 输出方式(代码压缩):

    • 正常(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使用说明的更多相关文章

  1. Atitit.项目修改补丁打包工具 使用说明

    Atitit.项目修改补丁打包工具 使用说明 1.1. 打包工具已经在群里面.打包工具.bat1 1.2. 使用方法:放在项目主目录下,执行即可1 1.3. 打包工具的原理以及要打包的项目列表1 1. ...

  2. awk使用说明

    原文地址:http://www.cnblogs.com/verrion/p/awk_usage.html Awk使用说明 运维必须掌握的三剑客工具:grep(文件内容过滤器),sed(数据流处理器), ...

  3. “我爱背单词”beta版发布与使用说明

    我爱背单词BETA版本发布 第二轮迭代终于画上圆满句号,我们的“我爱背单词”beta版本已经发布. Beta版本说明 项目名称 我爱背单词 版本 Beta版 团队名称 北京航空航天大学计算机学院  拒 ...

  4. Oracle 中 union 和union all 的简单使用说明

    1.刚刚工作不久,经常接触oracle,但是对oracle很多东西都不是很熟.今天我们来了解一下union和union all的简单使用说明.Union(union all): 指令的目的是将两个 S ...

  5. Map工具系列-02-数据迁移工具使用说明

    所有cs端工具集成了一个工具面板 -打开(IE) Map工具系列-01-Map代码生成工具说明 Map工具系列-02-数据迁移工具使用说明 Map工具系列-03-代码生成BySQl工具使用说明 Map ...

  6. Map工具系列-03-代码生成BySQl工具使用说明

    所有cs端工具集成了一个工具面板 -打开(IE) Map工具系列-01-Map代码生成工具说明 Map工具系列-02-数据迁移工具使用说明 Map工具系列-03-代码生成BySQl工具使用说明 Map ...

  7. jQuery验证控件jquery.validate.js使用说明

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...

  8. gdbsever 使用说明

    gdbsever 使用说明 在新塘N3292x平台下 编译 gdbsever ./configure --target=arm-linux --host=arm-linux arm-linux-gdb ...

  9. mongoVUE的增删改查操作使用说明

    mongoVUE的增删改查操作使用说明 一. 查询 1. 精确查询 1)右键点击集合名,再左键点击Find 或者直接点击工具栏上的Find 2)查询界面,包括四个区域 {Find}区,查询条件格式{& ...

  10. jQuery验证控件jquery.validate.js使用说明+中文API

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 学习 ...

随机推荐

  1. python判断操作系统

    https://www.crifan.com/python_get_current_system_os_type_and_version_info/ 参考:https://stackoverflow. ...

  2. swt 更新主UI线程

    // 将msg送回对应的Applet public void write(String msg) { synchronized (msg) { try { m_out.writeUTF(msg); } ...

  3. Linux内核学习之中断 中断本质【转】

    转自:http://www.linuxidc.com/Linux/2011-11/47657.htm [中断概述] 中断本质上是一种特殊的电信号,由硬件设备发向处理器.异常和中断的不同是异常在产生时必 ...

  4. CentOS下使用Iptraf进行网络流量的分析笔记

    CentOS下使用Iptraf进行网络流量的分析笔记 一.概述 Iptraf是一款linux环境下,监控网络流量的一款绝佳的免费小软件. 本博客其他随笔参考: Centos安装流量监控工具iftop笔 ...

  5. php常用的系统函数

    字符串函数 strlen:获取字符串长度,字节长度 substr_count 某字符串出现的次数 substr:字符串截取,获取字符串(按照字节进行截取) mb_strlenmb_substr str ...

  6. JavaScript的7种继承模式

    <JavaScript模式>一书中,对于JavaScript的几种继承模式讲解得很清楚,给我提供了很大帮助.总结一下,有如下7种模式. 继承模式1--设置原型(默认模式) 实现方式: // ...

  7. C#格式化时间,货币

    1.格式化货币(跟系统的环境有关,中文系统默认格式化人民币,英文系统格式化美元) string.Format("{0:C}",0.2) 结果为:¥0.20 (英文操作系统结果:$0 ...

  8. 细说robots.txt

    robots.txt Robots协议(也称为爬虫协议.机器人协议等)的全称是“网络爬虫排除标准”(Robots Exclusion Protocol),网站通过Robots协议告诉搜索引擎哪些页面可 ...

  9. 《Java编程思想》笔记 第二十章 注解

    1.注解 注解也称元数据,是在代码中添加信息的一种方式添加的信息提供给编译器或者工具类框架使用. SE5引入,可以提供用来完整描述程序所需要的信息,往往这些信息是无法用Java来表达的. 注解可以在编 ...

  10. private,public,protected 的作用

    public  修饰的变量和函数可以在类的内部和外部都可以访问 protected   修饰的变量和函数只可以在类的内部访问,如果该类派生出子类,那么在子类中该变量和函数也可以使用 private   ...