一、下载安装 atom-less

atom-less 项目在这里:https://github.com/schmuli/atom-less

安装方法请参考这篇博文:http://blog.csdn.net/kingittiger/article/details/51881442

二、使用方法

atom-less 的使用略显奇葩。跟其它 LESS 插件不同,它需要在每个 less 文件的头部都写上配置行,编译器读取这行配置,才可以正常运作。好处是,不同的 less 就可以用不同的配置,做到灵活输出,不用频繁去设置全局参数。

1. 官方参考说明 README.md

# atom-less package

An Atom package that auto-compiles LESS files on save, with support for LESS plugins, Clean-CSS and AutoPrefixer.

### Configuration

On the first line of LESS files, add a valid JSON comment, not including the outer brackets ('{' and '}'), with the following properties:

- **"main"**: `string` -
The relative or absolute path to the main LESS file to be compiled (ignores all other options)
- **"out"**: `boolean|string` -
`true` to output using the filename, or a string specifying a name to use
- **"compress"**: `boolean` -
Use Less.JS built-in compression (not compatible with Clean-CSS or Source Maps)
- **"strictMath"**: `boolean` -
Require brackets around math expressions
- **"sourceMap"**: `boolean|Object` -
`true` to turn on source maps, or an object specifying LESS source map properties
- **"cleancss"**: `string|object` -
a string specifying the 'compatibility' property,
or an object specifying the Clean-CSS properties (not compatible with Source Maps)
- **"autoprefixer"**: `string|object` -
a `;` separated string specifying the 'browsers' property,
or an object specifying the AutoPrefixer properties Other LESS compiler options might work but are untested at this point. ### Road Map
1. Remove dependency on inline comments, and instead use a .lesscfg project file, allowing easier configuration and automatic support of additional LESS plugins
2. Change callback passing to use Promises

来源:https://atom.io/packages/atom-less

2. 常用选项配置

其实常用的选项就两个:out 和 compressout 配置输出,compress 配置是否压缩。配置要写成 JSON 注释形式,但不包含花括号 { }

配置形式:

// "<选项1>": "<配置1>", "<选项2>": "<配置2>", ...

下面举几个例子:

// "out": true                  ## 输出同名的 css 文件,不压缩
// "out": "test.css" ## 输出名为 test.css 文件,不压缩
// "out": true, "compress": true ## 输出名为 test.css 文件,压缩

3. 常见问题问答

Atom Editor 插件 atom-less 的使用方法的更多相关文章

  1. Atom插件无法下载安装解决办法,Atom使用教程,Atom常用插件

    使用教程http://wiki.jikexueyuan.com/project/atom/plug-in.html atom通过setting中无法下载插件,通过apm也无法下载插件,可能是网络.co ...

  2. atom常用插件安装

    安装插件方法: File -Settings -Install 在搜索框里搜索你想要的插件,出来之后 点击install ,下图以 linter-selint 为例 ATOM常用插件推荐 simpli ...

  3. Atom 编辑器插件:amWiki 轻文库

    amWiki 是一款基于 Javascript 脚本语言.依赖 Atom 编辑器.使用 Markdown 标记语法的轻量级开源 wiki 文库系统. amWiki 致力于让大家可以更简单.更便捷的建设 ...

  4. Facebook的ATOM Editor的底层Electron

    Facebook的ATOM Editor的底层Electron 开源牛人 zcbenz 事情是这样的,微软推出了Visual Studio Code,我很好奇他怎么做跨平台的,所以就找找资料,在他的网 ...

  5. ATOM常用插件推荐

    转载:http://blog.csdn.net/qq_30100043/article/details/53558381 ATOM常用插件推荐 simplified-chinese-menu ATOM ...

  6. Android x86模拟器Intel Atom x86 System Image配置与使用方法

    Android x86模拟器Intel Atom x86 System Image配置与使用方法      前言:      大家现在开发使用的Android 模拟器模拟的是 ARM 的体系结构(ar ...

  7. Atom使用插件精选

    小颖之前公司的大哥推荐小颖用的编辑器是atom,之前都是他给小颖了一个atom插件安装列表,小颖电脑出了点问题,所以后来小颖把那弄丢了,小颖重装atom后,就不知道要安装什么插件,所以也百度了很多,今 ...

  8. [转]Android x86模拟器Intel Atom x86 System Image配置与使用方法

    Android x86模拟器Intel Atom x86 System Image配置与使用方法 前言: 大家现在开发使用的Android 模拟器模拟的是 ARM 的体系结构(arm-eabi),因此 ...

  9. 【编程工具】Sublime Text3 之 Emmet 插件的详细使用的方法

    这篇关于 Emmet 插件使用的博文之前就想写了,今天刚好闲暇时间,就花了一些时间进行了总结. 我们都这道 Emmet 这款插件在前端设计里被称为神器,确实,神器称号名不虚传.因为这款插件可以帮助我们 ...

随机推荐

  1. 成都Uber优步司机奖励政策(3月9日)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  2. (转)Html邮件CSS指南

    转载地址:http://www.maildesign.cn/archives/937 分享来自Campaignmonitor非常实用的Html邮件中CSS的支持文档! 他们总结的Html邮件的CSS指 ...

  3. CC2541广播机制和代码分析(未完成)

    1. 广播通道有3个,是固定的吗?设备为了节省功耗,可以忽略掉几个应答? 连接间隔可以是7.5ms到4s内的任意值,但必须是1.25ms的整数倍,从设备延迟,实际上是一个连接间隔的倍数,代表从设备在必 ...

  4. Omad群组部署、依赖部署一键解决

    本文来自网易云社区 作者:李培斌 前言 基于omad部署平台实现一键部署的实践已有很多成功的经验,杭研QA的技术先锋们也在ks圈里有很多不同的文章去阐述关于这类需求的实现和思路,当然包括我们金融事业部 ...

  5. java 素数问题

    1.素数 质数定义为在大于1的自然数中,除了1和它本身以外不再有其他因数. 2.java 实现 一般都要用不能被自己和其他数字整除判断,jdk中已经有更好的实现方法了. List<BigInte ...

  6. hdu1394Minimum Inversion Number(线段树,求最小逆序数)

    Minimum Inversion Number Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java ...

  7. OSG-CompositeViewer

    原文连接地址:http://www.osgchina.org/index.php?Itemid=490&id=134:usecompositiv&option=com_content& ...

  8. Qt-QML-Charts-ChartView-编译错误-ASSERT: "!"No style available without QApplication!

    昨天本来是回家想好好琢磨一下使用Chart来绘制曲线的,奈何在建立项目的时候也就卡住了,加上心情比较烦躁,也没有耐心寻找答案就草草了事.所以今天继续搞定这个. 上图是Qt 的编译错误截图 QML de ...

  9. unity初探之黑暗之光(2)

    unity初探之黑暗之光(2) 一.设置角色跟随鼠标点击移动 思路:使用charactercollider的SimpleMove方法来控制角色的移动.通过摄像机的射线投射到地面,通过屏幕上的一个点也就 ...

  10. 【WXS全局对象】Date

    属性: 名称 说明 Date.parse( [dateString] ) 解析一个日期时间字符串,并返回 1970/1/1 午夜距离该日期时间的毫秒数. Date.UTC(year,month,day ...