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.
plugins {
// plugins for the build system only
.
.
compile ":less-asset-pipeline:1.8.0"
compile ':asset-pipeline:1.7.1'
.
.
}
/* * 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 ...
<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
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
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.