-
Because this uses the Less.js parser and not the default PostCSS processor, some parsing will be different. PostCSS accepts "broken" CSS, whereas Less doubles as a de facto CSS linter, and will return errors if your Less / CSS is poorly structured. -
PostCSS will also sometimes "fix" CSS that uses property hacks, which Less preserves as the property name. As well, PostCSS will remove comments from within values, which are also kept in the value by Less (in most cases). -
Less.js does not save "raws" when parsing. It also only preserves the start line / column of your source, which is still fine for Source Maps. -
Important: The less() plugin needs to be the first PostCSS plugin called .
.add-bg-size ( @size ) { -webkit-background-size + : @size ; background-size + : @size ; } @default-size : twenty px ; .box { .add-bg-size ( @default-size ( @default-size / two )); .add-bg-size ( cover ); width : calc ( one hundred % - fifty px ); }
var less = require ( 'postcss-less-engine' ) ;
var autoprefixer = require ( 'autoprefixer' ) ;
var clean = require ( 'postcss-clean' ) ;
var exampleLess = fs . readFileSync ( path . join ( __dirname , 'example.less' ) , 'utf8' ) ;
postcss ( [
less ( { strictMath : true } ) ,
autoprefixer ( ) ,
clean ( )
] )
. process ( exampleLess , { parser : less . parser , from : 'example.less' } )
. then ( function ( result ) {
console . log ( result . css ) ;
} , function ( err ) { } ) ;
. box { background-size : twenty px ten px , cover; width : calc ( one hundred % - fifty px )}
npm install postcss-less-engine --save-dev
var less = require ( 'postcss-less-engine' ) ;
less ( { /* Less.js options */ } ) . process ( YOUR_CSS , { parser : less . parser } ) ;
var less = require ( 'postcss-less-engine' ) ;
postcss ( [
less ( { /* Less.js options */ } )
] ) . process ( YOUR_CSS , { parser : less . parser } ) . then ( function ( result ) {
// do something with result.css
} ) ;
npm install gulp-postcss --save-dev
var postcss = require ( 'gulp-postcss' ) ;
var less = require ( 'postcss-less-engine' ) ;
gulp . task ( 'less' , function ( ) {
return gulp . src ( './ css/src/style.less' ) . pipe (
postcss ( [
less ( { /* Less.js options */ } )
] , { parser : less . parser } )
) . pipe (
gulp . dest ( './ css' )
) ;
} ) ;
npm install postcss-less-engine --save-dev
grunt . loadNpmTasks ( 'grunt-postcss' ) ;
grunt . initConfig ( {
postcss : {
options : {
parser : require ( 'postcss-less-engine' ) . parser ,
processors : [
require ( 'postcss-less-engine' ) ( { /* Less.js options */ } )
]
} ,
dist : {
src : 'css/*.css'
}
}
} ) ;
less ( {
/* other Less.js options */
onImport : function ( sources ) {
console . log ( sources )
}
} )