.. | ||
lib | ||
node_modules | ||
LICENSE | ||
package.json | ||
README.md |
postcss-less
A PostCSS Syntax for parsing LESS
Note: This module requires Node v6.14.4+. poscss-less
is not a LESS compiler. For compiling LESS, please use the official toolset for LESS.
Install
Using npm:
npm install postcss-less --save-dev
![](https://c5.patreon.com/external/logo/become_a_patron_button@2x.png)
Please consider becoming a patron if you find this module useful.
Usage
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 // LESS with transformations
});
LESS Specific Parsing
@import
Parsing of LESS-specific @import
statements and options are supported.
@import (option) 'file.less';
The AST will contain an AtRule
node with:
- an
import: true
property - a
filename: <String>
property containing the imported filename - an
options: <String>
property containing any import options specified
Inline Comments
Parsing of single-line comments in CSS is supported.
:root {
// Main theme color
--color: red;
}
The AST will contain a Comment
node with an inline: true
property.
Mixins
Parsing of LESS mixins is supported.
.my-mixin {
color: black;
}
The AST will contain an AtRule
node with a mixin: true
property.
!important
Mixins that declare !important
will contain an important: true
property on their respective node.
Variables
Parsing of LESS variables is supported.
@link-color: #428bca;
The AST will contain an AtRule
node with a variable: true
property.
Note: LESS variables are strictly parsed - a colon (:
) must immediately follow a variable name.
Stringifying
To process LESS code without PostCSS transformations, custom stringifier should be provided.
const postcss = require('postcss');
const syntax = require('postcss-less');
const less = `
// inline comment
.container {
.mixin-1();
.mixin-2;
.mixin-3 (@width: 100px) {
width: @width;
}
}
.rotation(@deg:5deg){
.transform(rotate(@deg));
}
`;
const result = await postcss().process(less, { syntax });
// will contain the value of `less`
const { content } = result;
Use Cases
- Lint LESS code with 3rd-party plugins.
- Apply PostCSS transformations (such as Autoprefixer) directly to the LESS source code