PostCSS LESS Syntax
PostCSS Syntax for parsing LESS
Please note: poscss-less is not a LESS compiler. For compiling LESS, please use
the official toolset for LESS.
Getting Started
First thing's first, install the module:
npm install postcss-less --save-dev
LESS Transformations
The most common use of postcss-less
is for applying PostCSS transformations
directly to LESS source. eg. ia theme written in LESS which uses Autoprefixer
to add appropriate vendor prefixes.
const syntax = require('postcss-less');
postcss(plugins)
.process(lessText, { syntax: syntax })
.then(function (result) {
result.content
});
Parsing of single-line comments in CSS is also supported.
:root {
--color: red;
}
Note that you don't need a custom stringifier to handle the output; the default
stringifier will automatically convert single line comments into block comments.
If you need to support inline comments, please use a custom PostCSSLess stringifier.
Rule Node
PostCSS Rule Node
rule.ruleWithoutBody
Determines whether or not a rule has a body, or content.
import postCssLess from 'postcss-less';
const less = `
.class2 {
&:extend(.class1);
.mixin-name(@param1, @param2);
}
`;
const root = postCssLess.parse(less);
root.first.nodes[0].ruleWithoutBody
root.first.nodes[1].ruleWithoutBody
rule.nodes
An Array
of child nodes.
Note that rules without body don't have this property.
import postCssLess from 'postcss-less';
const less = `
.class2 {
&:extend(.class1);
.mixin-name(@param1, @param2);
}
`;
const root = postCssLess.parse(less);
root.first.nodes[0].nodes
root.first.nodes[1].nodes
rule.extendRule
Determines whether or not a rule is nested (eg.
extended).
import postCssLess from 'postcss-less';
const less = `
.class2 {
&:extend(.class1);
}
`;
const root = postCssLess.parse(less);
root.first.nodes[0].extendRule
PostCSS Comment Node
Determines whether or not a comment is inline.
import postCssLess from 'postcss-less';
const root = postCssLess.parse('// Hello world');
root.first.inline
Determines whether or not a comment is a block comment.
import postCssLess from 'postcss-less';
const root = postCssLess.parse('/* Hello world */');
root.first.block
Precending characters of a comment node. eg. //
or /*
.
Raw content of the comment.
import postCssLess from 'postcss-less';
const root = postCssLess.parse('// Hello world');
root.first.raws.content
Stringifying
To process LESS code without PostCSS transformations, custom stringifier
should be provided.
import postcss from 'postcss';
import postcssLess from 'postcss-less';
import stringify from 'postcss-less/less-stringify';
const lessCode = `
// Non-css comment
.container {
.mixin-1();
.mixin-2;
.mixin-3 (@width: 100px) {
width: @width;
}
}
.rotation(@deg:5deg){
.transform(rotate(@deg));
}
`;
postcss()
.process(less, {
syntax: postcssLess,
stringifier: stringify
})
.then((result) => {
console.log(result.content);
});
Use Cases
- Lint LESS code with 3rd-party plugins.
- Apply PostCSS transformations (such as Autoprefixer) directly to the LESS source code
Contribution
Please, check our guidelines: CONTRIBUTING.md
Attribution
This module is based on the postcss-scss library.