1 | # PostCSS LESS Syntax
|
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 |
|
21 | A [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 |
|
34 | The main use case of this plugin is to apply PostCSS transformations directly
|
35 | to 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
|
39 | const syntax = require('postcss-less');
|
40 | postcss(plugins).process(lessText, { syntax: syntax }).then(function (result) {
|
41 | result.content // LESS with transformations
|
42 | });
|
43 | ```
|
44 |
|
45 | ### Comments
|
46 |
|
47 | #### Inline comments
|
48 |
|
49 | This 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 |
|
58 | Note that you don't need a special stringifier to handle the output; the default
|
59 | one will automatically convert single line comments into block comments.
|
60 | If you need to get inline comments, use [custom PostCSSLess stringifier](#stringifier)
|
61 |
|
62 | ### Rule node
|
63 | [PostCSS Rule Node](https://github.com/postcss/postcss/blob/master/docs/api.md#rule-node)
|
64 |
|
65 | #### rule.ruleWithoutBody
|
66 | It shows that Rule node has body or not.
|
67 |
|
68 | ````js
|
69 | import postCssLess from 'postcss-less';
|
70 | const less = `
|
71 | .class2 {
|
72 | &:extend(.class1);
|
73 | .mixin-name(@param1, @param2);
|
74 | }
|
75 | `;
|
76 | const root = postCssLess.parse(less);
|
77 |
|
78 | root.first.nodes[0].ruleWithoutBody // => true for &:extend
|
79 | root.first.nodes[1].ruleWithoutBody // => true for calling of mixin
|
80 | ````
|
81 | #### rule.nodes
|
82 |
|
83 | Array of children nodes.
|
84 | **Note** that rules without body don't have this property.
|
85 |
|
86 | ````js
|
87 | import postCssLess from 'postcss-less';
|
88 | const less = `
|
89 | .class2 {
|
90 | &:extend(.class1);
|
91 | .mixin-name(@param1, @param2);
|
92 | }
|
93 | `;
|
94 | const root = postCssLess.parse(less);
|
95 |
|
96 | root.first.nodes[0].nodes // => undefined for &:extend
|
97 | root.first.nodes[1].nodes // => undefined for mixin calling
|
98 | ````
|
99 |
|
100 | #### rule.extendRule
|
101 | It shows that Rule node is a nested [extend](http://lesscss.org/features/#extend-feature-extend-inside-ruleset) rule.
|
102 |
|
103 | ````js
|
104 | import postCssLess from 'postcss-less';
|
105 | const less = `
|
106 | .class2 {
|
107 | &:extend(.class1);
|
108 | }
|
109 | `;
|
110 | const root = postCssLess.parse(less);
|
111 |
|
112 | root.first.nodes[0].extendRule // => true
|
113 | ````
|
114 |
|
115 | ### Comment Node
|
116 |
|
117 | [PostCSS Comment Node](https://github.com/postcss/postcss/blob/master/docs/api.md#comment-node)
|
118 |
|
119 | #### comment.inline
|
120 | It's inline comment or not.
|
121 | ````js
|
122 | import postCssLess from 'postcss-less';
|
123 |
|
124 | const root = postCssLess.parse('// Hello world');
|
125 |
|
126 | root.first.inline // => true
|
127 | ````
|
128 |
|
129 | #### comment.block
|
130 | It's block comment or not.
|
131 | ````js
|
132 | import postCssLess from 'postcss-less';
|
133 |
|
134 | const root = postCssLess.parse('/* Hello world */');
|
135 |
|
136 | root.first.block // => true
|
137 | ````
|
138 |
|
139 | #### comment.raws.begin
|
140 | Precending characters of comment node: `//` or `/*`.
|
141 |
|
142 | #### comment.raws.content
|
143 | Raw content of the comment.
|
144 | ````js
|
145 | import postCssLess from 'postcss-less';
|
146 |
|
147 | const root = postCssLess.parse('// Hello world');
|
148 |
|
149 | root.first.raws.content // => '// Hello world'
|
150 | ````
|
151 |
|
152 | ### Stringifier
|
153 |
|
154 | If you need to have LESS code without PostCSS transformation, you have to specify a custom stringifier:
|
155 |
|
156 | ````js
|
157 | import postcss from 'postcss';
|
158 | import postcssLess from 'postcss-less';
|
159 | import stringify from 'postcss-less/less-stringify';
|
160 |
|
161 | const lessCode = `
|
162 | // Non-css comment
|
163 |
|
164 | .container {
|
165 | .mixin-1();
|
166 | .mixin-2;
|
167 | .mixin-3 (@width: 100px) {
|
168 | width: @width;
|
169 | }
|
170 | }
|
171 |
|
172 | .rotation(@deg:5deg){
|
173 | .transform(rotate(@deg));
|
174 | }
|
175 | `;
|
176 |
|
177 | postcss().process(less, {
|
178 | syntax: postcssLess,
|
179 | stringifier: stringify
|
180 | }).then((result) => {
|
181 | console.log(result.content); // this will be value of `lessCode` without changing of comment nodes and mixins
|
182 | });
|
183 | ````
|
184 |
|
185 | ## Contribution
|
186 | Please, check our guidelines: [CONTRIBUTING.md](./CONTRIBUTING.md)
|
187 |
|
188 | ## Attribution
|
189 |
|
190 | This 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)
|
191 |
|
\ | No newline at end of file |