Constants support in CSS files

This module allow you to use constants in the CSS files. It is very helpful when you work with large CSS files, to avoid to repeat yourself with color, fonts...

Enable this module for your application

Just add this line to the conf/application.conf file of your application:

module.ecss=${play.path}/modules/ecss

At application start time, you should see the following message:

00:21:45,192 INFO  ~ Module ecss is available (.../play/modules/ecss)

Define constants in the CSS files

Just declare CSS constants in top of your CSS files and reuse them latter in the same file.

$mainColor: #c00; $secondaryColor: green;
$font: verdana, sans-serif;
 
body {
   color: $mainColor;
   font-family: $font;
}
 
a {
   color: $mainColor;
   font-family: $font;
}
 
em {
   color: $secondaryColor
}

Warning

The '‘ecss’' module just enable constants in static CSS files. The CSS files will not be parsed for each request.

If you want to enable CSS variables whose values depend on your application context, it’s a different story... You can for example generate the stylesheet from a play Controller action, or define some CSS rules in your main HTML template.