Atom Editor 插件 atom-less 的使用方法

一、下载安装 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. 常见问题问答

时间: 2024-12-14 07:49:16

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

Atom编辑器折腾记_(11)编辑器实时预览HTML页面(插件:Atom HTML Preview)

为何寻找 每次预览HTML页面,都需要打开各种浏览器;哪怕不是调试,只是为了查看下效果; 切换来切换去,各种刷新,感觉有些浪费时间;以前用过DW的实时预览,感觉这个功能很赞; 又踏上了atom插件仓库慢慢寻找之路-.. 插件:atom-html-preview 官方描述:A live preview tool for Atom Editor. 简言之:Atom编辑器内实时预览的工具 获取方式 通过命令行安装 apm install atom-html-preview 通过编辑器内部的instal

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

Android x86模拟器Intel Atom x86 System Image配置与使用方法      前言:      大家现在开发使用的Android 模拟器模拟的是 ARM 的体系结构(arm-eabi),因此模拟器并不是运行在x86上而是模拟的ARM,所以我们调试程序的时候经常感觉到非常慢,大部分开发者应该都深有体会.      针对这种情况,前段时间Intel推出了支持x86的Android模拟器,这将大大提高启动速度和程序的运行速度,这将允许Android模拟器能够以原始速度(真

Facebook的ATOM Editor的底层Electron

Facebook的ATOM Editor的底层Electron 开源牛人 zcbenz 事情是这样的,微软推出了Visual Studio Code,我很好奇他怎么做跨平台的,所以就找找资料,在他的网站中是这么描述的: Architecturally, Visual Studio Code combines the best of web, native, and language-specific technologies. Using the GitHub Electron Shell 所以

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

Android x86模拟器Intel Atom x86 System Image配置与使用方法 前言: 大家现在开发使用的Android 模拟器模拟的是 ARM 的体系结构(arm-eabi),因此模拟器并不是运行在x86上而是模拟的ARM,所以我们调试程序的时候经常感觉到非常慢,大部分开发者应该都深有体会. 针对这种情况,前段时间Intel推出了支持x86的Android模拟器,这将大大提高启动速度和程序的运行速度,这将允许Android模拟器能够以原始速度(真机运行速度)运行在使用Inte

Atom - Emmet插件的使用详解(HTML/CSS代码自动补全)

一.Emmet的安装与介绍 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的工具,能够实现 HTML.CSS 的快速编写. 官网地址:http://emmet.io/ 官方文档:http://docs.emmet.io/cheat-sheet/ Atom的emmet介绍页面:https://atom.io/packages/emmet 1,使用Emmet的好处 通常大多数的文本编辑器都会允许我们存储和重用一些代码块,我们称之为“片段”.虽然片段能很好地推动我们的生产

MyEclipse10.x 安装 properties editor插件

一.MyEclipse10.x 安装 properties editor插件 今日做了个struts验证小程序,显示ApplicationResources.properties中汉字提示信息,结果显示乱码. 怎么也没解决,在网上找了各种资料,发现一个插件Poperties Editor,只要装上,就可以自动解决这个问题. 但是装起来不是那么的容易,先是找了好久的插件哦! 下面主要介绍的安装方法: (1)在线安装: 这个不用多说打开help---eclipse Marketplace--然后搜索

AspectJ学习笔记2-Eclipse中AspectJ插件AJDT的正确安装方法

接着之前一篇日志.这个事情也挺无语的,简单记录一下. 在这里:http://www.eclipse.org/ajdt/ 可以下载最新的Eclipse Plugin,下载解压之后,一般来说,直接把解压后文件夹下的features和plugins放到Eclipse的文件夹下就行了.不过我这样做以后,启动Eclipse,发现没什么作用.才参考网上有人介绍的第二种方法,也就是Help--Install New Software--Add--Local这种方式选择刚才的解压文件夹,但是这样操作以后会报像下

Sublime Text 无法使用Package Control或插件安装失败的解决方法

Sublime Text用了一年多了,公司搬家近期突然发现Package Control无法安装新插件了.尽管不影响原有功能的使用.还是要解决它.因为本人用Windows系统,仅仅讨论Windosw下的解决方法. Mac与Linux下的用户能够參照解决. 本文主要介绍Sublime Text怎样开启debug模式.分析使用过程中一些常见错误情形的解决方法. 情形一:Package Control:There are no packages available for installation.情

安装Properties Editor插件,解决XXX.properties文件中文乱码的问题

Properties Edito官网地址:http://propedit.sourceforge.jp/index_en.html Properties Edito安装地址:http://propedit.sourceforge.jp/howto_eclipseplugin_install_en.html 一.在线安装Properties Editor插件步骤 1. Help --> Install New Software 2. 在打开窗口"Work with"输入:http: