LESS 做为 CSS 的一种形式的扩展,在现有的 CSS 语法上,添加了很多额外的功能。LESS 给 CSS 赋予了动态语言的特性,如 变量, 继承,运算, 函数。LESS 既可以在 客户端 上运行(支持 IE 6+,Webkit,Firefox),也可以借助 Node.js 或者 Rhino 在服务端运行。
下文中用 LESS 表示这种技术,less 表示用 LESS 写的文件
如果使用 less 文件加入到网站中去,那必须还得引入另一套解释 less 文件的 js 程序,将降低网站性能,且个别浏览器兼容性还有问题。因此,普遍的做法是将 less 文件编译成 css 文件,然后再上传到网站中。
Atom Editor 是个扩展性很好的文本编辑器,使用扩展自动编译 LESS 当然不在话下。我找了 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
和 compress
。out
配置输出,compress
配置是否压缩。配置要写成 JSON 注释形式,但不包含花括号 { }
。
配置形式:
// "<选项1>": "<配置1>", "<选项2>": "<配置2>", ...
下面举几个例子:
// "out": true ## 输出同名的 css 文件,不压缩
// "out": "test.css" ## 输出名为 test.css 文件,不压缩
// "out": true, "compress": true ## 输出名为 test.css 文件,压缩
3. 常见问题问答
valid less comment
错误:https://github.com/schmuli/atom-less/issues/4