UNPKG

5.08 kBMarkdownView Raw
1# PostCSS LESS Syntax - Work in Progress
2
3[PostCSS]: https://github.com/postcss/postcss
4[PostCSS-SCSS]: https://github.com/postcss/postcss-scss
5[LESS]: http://lesless.org
6[Autoprefixer]: https://github.com/postcss/autoprefixer
7[Stylelint]: http://stylelint.io/
8
9> This project is not stable and is in development. If you'd like to contribute, please submit a Pull Request.
10
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">
14
15[![Build Status](https://img.shields.io/travis/webschik/postcss-less.svg?branch=develop)](https://travis-ci.org/webschik/postcss-less)
16[![npm Downloads](https://img.shields.io/npm/dt/postcss-less.svg)](https://www.npmjs.com/package/postcss-less)
17[![npm Version](https://img.shields.io/npm/v/postcss-less.svg)](https://www.npmjs.com/package/postcss-less)
18[![npm License](https://img.shields.io/npm/l/postcss-less.svg)](https://www.npmjs.com/package/postcss-less)
19[![js-strict-standard-style](https://img.shields.io/badge/code%20style-strict-117D6B.svg)](https://github.com/keithamus/eslint-config-strict)
20
21A [LESS] parser for [PostCSS].
22
23**This module does not compile LESS.** It simply parses mixins and variables so that PostCSS plugins can then transform LESS source code alongside CSS.
24
25## Use Cases
26
27* lint your LESS code with 3rd-part plugins.
28* apply PostCSS transformations (such as [Autoprefixer](https://github.com/postcss/autoprefixer)) directly to the LESS source code
29
30## Usage
31
32### LESS Transformations
33
34The main use case of this plugin is to apply PostCSS transformations directly
35to LESS source code. For example, if you ship a theme written in LESS and need
36[Autoprefixer] to add the appropriate vendor prefixes to it.
37
38```js
39const syntax = require('postcss-less');
40postcss(plugins).process(lessText, { syntax: syntax }).then(function (result) {
41 result.content // LESS with transformations
42});
43```
44
45### Comments
46
47#### Inline comments
48
49This module also enables parsing of single-line comments in CSS source code.
50
51````less
52:root {
53 // Main theme color
54 --color: red;
55}
56````
57
58Note that you don't need a special stringifier to handle the output; the default
59one will automatically convert single line comments into block comments.
60If you need to get inline comments, use stringifier from `postcss-less` module:
61
62````js
63import postCssLess from 'postcss-less';
64
65const root = postCssLess.parse('// Hello world');
66
67root.first.toString(); // returns '/* Hello world */'
68
69root.first.toString({
70 stringify: postCssLess.stringify
71}); // returns '// Hello world'
72````
73
74### Rule node
75[PostCSS Rule Node](https://github.com/postcss/postcss/blob/master/docs/api.md#rule-node)
76
77#### rule.ruleWithoutBody
78It shows that Rule node has body or not.
79
80````js
81import postCssLess from 'postcss-less';
82const less = `
83 .class2 {
84 &:extend(.class1);
85 .mixin-name(@param1, @param2);
86 }
87`;
88const root = postCssLess.parse(less);
89
90root.first.nodes[0].ruleWithoutBody // => true for &:extend
91root.first.nodes[1].ruleWithoutBody // => true for calling of mixin
92````
93#### rule.nodes
94
95Array of children nodes.
96**Note** that rules without body don't have this property.
97
98````js
99import postCssLess from 'postcss-less';
100const less = `
101 .class2 {
102 &:extend(.class1);
103 .mixin-name(@param1, @param2);
104 }
105`;
106const root = postCssLess.parse(less);
107
108root.first.nodes[0].nodes // => undefined for &:extend
109root.first.nodes[1].nodes // => undefined for mixin calling
110````
111
112#### rule.extendRule
113It shows that Rule node is a nested [extend](http://lesscss.org/features/#extend-feature-extend-inside-ruleset) rule.
114
115````js
116import postCssLess from 'postcss-less';
117const less = `
118 .class2 {
119 &:extend(.class1);
120 }
121`;
122const root = postCssLess.parse(less);
123
124root.first.nodes[0].extendRule // => true
125````
126
127### Comment Node
128
129[PostCSS Comment Node](https://github.com/postcss/postcss/blob/master/docs/api.md#comment-node)
130
131#### comment.inline
132It's inline comment or not.
133````js
134import postCssLess from 'postcss-less';
135
136const root = postCssLess.parse('// Hello world');
137
138root.first.inline // => true
139````
140
141#### comment.block
142It's block comment or not.
143````js
144import postCssLess from 'postcss-less';
145
146const root = postCssLess.parse('/* Hello world */');
147
148root.first.block // => true
149````
150
151#### comment.raws.begin
152Precending characters of comment node: `//` or `/*`.
153
154#### comment.raws.content
155Raw content of the comment.
156````js
157import postCssLess from 'postcss-less';
158
159const root = postCssLess.parse('// Hello world');
160
161root.first.raws.content // => '// Hello world'
162````
163
164### Stylelint support
165`postcss-less` parser **is not compatible** with `Stylelint`, because `Stylelint` can't process syntax tree from `postcss-less`!
166
167## Contribution
168Please, check our guidelines: [CONTRIBUTING.md](./CONTRIBUTING.md)
169
170## Attribution
171
172This module is based on the work of [postcss-scss](https://github.com/postcss/postcss-scss) library and includes the `LESS` parser efforts of [github:gilt/postcss-less](https://github.com/gilt/postcss-less)
173
\No newline at end of file