less4j Grails Asset Pipeline plugin

Posted By : Ravi Kumar | 11-Jul-2014

Less :

A CSS pre-processor is an extended version of standard CSS language. It supports features like creating variables, mixins, functions and other techniques that makes our CSS more feasible, maintainable and expendable.

For example :

@font-light-red : #fe8085;
@font-green : #41a626;

.rounded-radius (@radius: 8px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}
 
.shipping-container {
  .rounded-radius;
  .error-message{
	color: @font-light-red;
  }
}
.cart-container {
  .rounded-radius(5px);
  .success-message{
	color: @font-green;
  }
}

Less Usage :

Grails less-asset-pipeline provides less support for asset-pipeline that I have described in my previous blog.

Inlude less compiler in BuildConfig.groovy
plugins {
	// plugins for the build system only
	.
	.
	compile ":less-asset-pipeline:1.8.0"
	compile ':asset-pipeline:1.7.1'
	.
	.
}
Inlude .less javascript library to application.js file that contain all script files needed
 
application.js
/*
 * This is a manifest file that'll be compile into application.js,
 * which will include all the files from mockup-app and its sub-directories related to 
 * all front-end.
 * 
 */
 
 //=require less-1.7.3.min
 //=require ...
 //=require ...
Less4j :
 
Simply we include our .less file into head section and compiler compiles it and browser gets standard CSS style.
<head>
	<link rel="stylesheet" href="style.less" type="text/css"/>
</head>

By using Asset-pipeline we include this as

<head>
	<asset:stylesheet href="mockup-app/style.less"/>
</head>

Grails Asset Pipeline plugin supports compiling our less files with less4j instead standard less compiler. We have to add following code in our config.groovy

grails.assets.less.compiler = 'less4j'

and BuildConfig.groovy

plugins {
	compile ":less-asset-pipeline:1.8.0"
	.
	.
}

Now we do not need to include our style.less file extension .less and we can simply add CSS file as style.css

<!DOCTYPE html>
<html>
<head>
<title>...</title>
	<asset:stylesheet href="mockup-app/application.css"/>
	
	<asset:javascript src="mockup-app/application.js"/>
	<g:layoutHead />
</head>
<body>
	...
	...
	...
</body>
</html>

application.css will include all css files. We do not need style.less simply include style.css or require style with asset plugin.

/*
 * This is a manifest file that'll be compile into application.css,
 * which will include all the files from mockup-app and its sub-directories.
 * 
 * 
 */
 
 /*
 *=require style
 *=require jquery-ui-1.10.3
 *
 *=require_self
 */

During WAR build our less files are compiled in standard CSS files. For including multiple .less files it will be nice if we create a sub folder for all less files and exclude these in our precompiler config.

Config.groovy

grails.assets.excludes = ["mixins/*.less"]

Please share your views and comments if find here some useful things. To know more about this please contact our team [email protected]

Thanks

Ravi Kumar

About Author

Author Image
Ravi Kumar

Ravi is a creative UI designer with experience and capabilities to build compelling UI designs for Web and Mobile Applications. Ravi likes Tech Quizes and playing Football.

Request for Proposal

Name is required

Comment is required

Sending message..