1 [PostCSS]: https://github.com/postcss/postcss
2 [PostCSS-SCSS]: https://github.com/postcss/postcss-scss
3 [LESS]: http://lesless.org
4 [Autoprefixer]: https://github.com/postcss/autoprefixer
5 [Stylelint]: http://stylelint.io/
7 # PostCSS LESS Syntax [![Build Status](https://img.shields.io/travis/shellscape/postcss-less.svg?branch=develop)](https://travis-ci.org/shellscape/postcss-less) [![npm Version](https://img.shields.io/npm/v/postcss-less.svg)](https://www.npmjs.com/package/postcss-less)
9 [PostCSS] Syntax for parsing [LESS]
11 <img align="right" width="95" height="95"
12 title="Philosopher's stone, logo of PostCSS"
13 src="http://postcss.github.io/postcss/logo.svg">
15 Please note: poscss-less is not a LESS compiler. For compiling LESS, please use
16 the official toolset for LESS.
20 First thing's first, install the module:
23 npm install postcss-less --save-dev
26 ## LESS Transformations
28 The most common use of `postcss-less` is for applying PostCSS transformations
29 directly to LESS source. eg. ia theme written in LESS which uses [Autoprefixer]
30 to add appropriate vendor prefixes.
33 const syntax = require('postcss-less');
35 .process(lessText, { syntax: syntax })
36 .then(function (result) {
37 result.content // LESS with transformations
43 Parsing of single-line comments in CSS is also supported.
52 Note that you don't need a custom stringifier to handle the output; the default
53 stringifier will automatically convert single line comments into block comments.
54 If you need to support inline comments, please use a [custom PostCSSLess stringifier](#stringifier).
58 [PostCSS Rule Node](https://github.com/postcss/postcss/blob/master/docs/api.md#rule-node)
62 Determines whether or not a rule contains declarations.
64 _Note: Previously `ruleWithoutBody`. This is a breaking change from v0.16.0 to v1.0.0._
67 import postCssLess from 'postcss-less';
71 .mixin-name(@param1, @param2);
74 const root = postCssLess.parse(less);
76 root.first.nodes[0].empty // => true for &:extend
77 root.first.nodes[1].empty // => true for calling of mixin
82 Determines whether or not a rule is [nested](http://lesscss.org/features/#extend-feature-extend-inside-ruleset).
84 _Note: Previously `extendRule`. This is a breaking change from v0.16.0 to v1.0.0._
87 import postCssLess from 'postcss-less';
93 const root = postCssLess.parse(less);
95 root.first.nodes[0].extend // => true
100 Determines whether or not a rule is marked as [important](http://lesscss.org/features/#mixins-feature-the-important-keyword).
102 _Note: This is a breaking change from v0.16.0 to v1.0.0._
105 import postCssLess from 'postcss-less';
111 const root = postCssLess.parse(less);
113 root.first.nodes[0].important // => true
114 root.first.nodes[0].selector // => '.mixin'
119 Determines whether or not a rule is a [mixin](http://lesscss.org/features/#mixins-feature).
122 import postCssLess from 'postcss-less';
128 const root = postCssLess.parse(less);
130 root.first.nodes[0].mixin // => true
135 An `Array` of child nodes.
137 **Note** that `nodes` is `undefined` for rules that don't contain declarations.
140 import postCssLess from 'postcss-less';
144 .mixin-name(@param1, @param2);
147 const root = postCssLess.parse(less);
149 root.first.nodes[0].nodes // => undefined for &:extend
150 root.first.nodes[1].nodes // => undefined for mixin
155 [PostCSS Comment Node](https://github.com/postcss/postcss/blob/master/docs/api.md#comment-node)
159 Determines whether or not a comment is inline.
162 import postCssLess from 'postcss-less';
164 const root = postCssLess.parse('// Hello world');
166 root.first.inline // => true
171 Determines whether or not a comment is a block comment.
174 import postCssLess from 'postcss-less';
176 const root = postCssLess.parse('/* Hello world */');
178 root.first.block // => true
181 ### comment.raws.begin
183 Precending characters of a comment node. eg. `//` or `/*`.
185 ### comment.raws.content
187 Raw content of the comment.
190 import postCssLess from 'postcss-less';
192 const root = postCssLess.parse('// Hello world');
194 root.first.raws.content // => '// Hello world'
199 To process LESS code without PostCSS transformations, custom stringifier
203 import postcss from 'postcss';
204 import postcssLess from 'postcss-less';
205 import stringify from 'postcss-less/less-stringify';
213 .mixin-3 (@width: 100px) {
218 .rotation(@deg:5deg){
219 .transform(rotate(@deg));
226 stringifier: stringify
229 console.log(result.content); // this will be value of `lessCode` without changing comments or mixins
235 * Lint LESS code with 3rd-party plugins.
236 * Apply PostCSS transformations (such as [Autoprefixer](https://github.com/postcss/autoprefixer)) directly to the LESS source code
240 Please, check our guidelines: [CONTRIBUTING.md](./CONTRIBUTING.md)
244 This module is based on the [postcss-scss](https://github.com/postcss/postcss-scss) library.
246 [![npm Downloads](https://img.shields.io/npm/dt/postcss-less.svg)](https://www.npmjs.com/package/postcss-less)
247 [![npm License](https://img.shields.io/npm/l/postcss-less.svg)](https://www.npmjs.com/package/postcss-less)
248 [![js-strict-standard-style](https://img.shields.io/badge/code%20style-strict-117D6B.svg)](https://github.com/keithamus/eslint-config-strict)