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.
Using npm:
npm install postcss-less --save-dev
Please consider becoming a patron if you find this module useful.
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.
constsyntax=require('postcss-less');postcss(plugins).process(lessText,{syntax: syntax}).then(function(result){result.content// LESS with transformations});Parsing of LESS-specific @import statements and options are supported.
@import (option) 'file.less';The AST will contain an AtRule node with:
- an
import: trueproperty - a
filename: <String>property containing the imported filename - an
options: <String>property containing any import options specified
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.
Parsing of LESS mixins is supported.
.my-mixin {
color: black;
}The AST will contain an AtRule node with a mixin: true property.
Mixins that declare !important will contain an important: true property on their respective node.
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.
To process LESS code without PostCSS transformations, custom stringifier should be provided.
constpostcss=require('postcss');constsyntax=require('postcss-less');constless=` // inline comment .container { .mixin-1(); .mixin-2; .mixin-3 (@width: 100px) { width: @width; } } .rotation(@deg:5deg){ .transform(rotate(@deg)); }`;constresult=awaitpostcss().process(less,{ syntax });// will contain the value of `less`const{ content }=result;- Lint LESS code with 3rd-party plugins.
- Apply PostCSS transformations (such as Autoprefixer) directly to the LESS source code