Auto compile SASS stylesheets with maven

This simple example show how to set up a maven web application using SASS (.scss) stylesheets by compiling automatically on changing without restarting the server.

The project structure:

project-structure

Maven configuration

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>hu.daniel.hari.exercises</groupId>
    <artifactId>Tutorial-SassMavenAutoCompile</artifactId>
    <version>1.0</version>
    <packaging>war</packaging>

    <properties>
        <!-- Generic properties -->
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <java.version>1.7</java.version>
        <!-- -->
    </properties>

    <dependencies>
    </dependencies>

    <build>
        <plugins>

            <plugin>
                <artifactId>maven-compiler-plugin</artifactId>
                <configuration>
                    <source>${java.version}</source>
                    <target>${java.version}</target>
                </configuration>
            </plugin> 

            <!-- Sass compiler -->
            <plugin>
                <groupId>org.jasig.maven</groupId>
                <artifactId>sass-maven-plugin</artifactId>
                <version>1.1.1</version>
                <executions>
                    <execution>
                        <phase>prepare-package</phase>
                        <goals>
                            <goal>update-stylesheets</goal>
                        </goals>
                    </execution>
                </executions>
                <configuration>
                    <resources>
                        <resource>
                            <!-- Set source and destination dirs -->
                            <source>
                                <directory>${project.basedir}/src/main/webapp/sass</directory>
                            </source>
                            <destination>${project.basedir}/src/main/webapp/sass_compiled</destination>
                        </resource>
                    </resources>
                </configuration>
            </plugin>

        </plugins>

    </build>

</project>

Create a simple page:

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>

<head>
    <link rel="stylesheet" href="sass_compiled/styles.css">
</head>

<body>

    <!-- Site navigation menu -->
    <ul class="navbar">
        <li><a href="#">Home page</a></li>
        <li><a href="#">Musings</a></li>
        <li><a href="#">My town</a></li>
        <li><a href="#">Links</a></li>
    </ul>

    <!-- Main content -->
    <h1>My first sass styled page</h1>

    <p>Welcome to my styled page!</p>
    <p>It lacks images, but at least it has style. And it has links,
        even if they don't go anywhere…</p>
    <p>There should be more here, but I don't know what yet.</p>

</body>
</html>

Create a Sass (.scss) stylesheet

styles.scss

/* Example sass stylesheet */

body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman", Times, serif;
    color: purple;
    background-color: #CDF;
}

ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em;

    li { 
        background: white;
        margin: 0.5em 0;
        padding: 0.3em;
        border-right: 1em solid black;
    }

    a { 
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }

}

h1 {
    font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
}

Run sass watcher

For hot-deploy auto compiling run sass-maven-plugin’s watch goal:

mvn sass:watch

If you use eclipse, you can create a maven run configuration for one click run:

debugconf

Maven log show when detected changes and recompiling .scss files:

[INFO] --- sass-maven-plugin:1.1.1:watch (default-cli) @ Tutorial-SassMavenAutoCompile ---
[INFO] Watching SASS Templates
[INFO] Queing SASS Template for compile: F:/workspace_luna/BITBUCKET/Exercises-2014/!MyTutorials/Sass/Tutorial-SassMavenAutoCompile/src/main/webapp/sass => F:/workspace_luna/BITBUCKET/Exercises-2014/!MyTutorials/Sass/Tutorial-SassMavenAutoCompile/src/main/webapp/sass_compiled
[INFO]     >> F:/workspace_luna/BITBUCKET/Exercises-2014/!MyTutorials/Sass/Tutorial-SassMavenAutoCompile/src/main/webapp/sass/styles.scss => F:/workspace_luna/BITBUCKET/Exercises-2014/!MyTutorials/Sass/Tutorial-SassMavenAutoCompile/src/main/webapp/sass_compiled/styles.css
[INFO] Change File detected F:/workspace_luna/BITBUCKET/Exercises-2014/!MyTutorials/Sass/Tutorial-SassMavenAutoCompile/src/main/webapp/sass/styles.scss
[INFO]     >> F:/workspace_luna/BITBUCKET/Exercises-2014/!MyTutorials/Sass/Tutorial-SassMavenAutoCompile/src/main/webapp/sass/styles.scss => F:/workspace_luna/BITBUCKET/Exercises-2014/!MyTutorials/Sass/Tutorial-SassMavenAutoCompile/src/main/webapp/sass_compiled/styles.css

Check in browser

sass-browsersh

Do some changes in styles.scss, save it and check browser again without restarting web server.

References:
https://developer.jasig.org/projects/sass-maven-plugin/1.1.1/update-stylesheets-mojo.html

You can download the maven project source:

Written by Dániel Hári

Dániel Hári is the founder of log4jtester.com, cleancodejava.com. Who is an enthusiastic Java developer who enhances his knowledge by continously searching for best practices and modern technologies. Engaged to clean coding, and honors the engineering profession as releasing quality work.

  • http://www.firsttoolboxman.com Lanny Brisbin

    hey there and thank you for your info – I have definitely picked up anything new from right here.I did however expertise some technical issues using this website, since I experienced to reload thesite lots of times previous to I could get it to load properly.I had been wondering if your web hosting is OK? Not that Iam complaining, but slow loading instances times willoften affect your placement in google and could damage your quality score if ads and marketing with Adwords.Anyway I’m adding this RSS to my e-mail and could lookout for much more of your respective fascinating content. Make sure you update thisagain very soon.

    • http://log4jtester.com Dániel Hári

      Hi Lanny! Thanks for your comment! This is wordpress site, it needs around 2s to download for me maximum, I think that’s ok, but if you experience more, please tell me.

  • Piara Singh Namdhari

    if possible in your Awesome blog, for latest readers please kindly add the link to the latest version of sass-maven-plugin. which as of my writing this comment seems to be 2.21..
    Thanks, just as a suggestion.
    and yes, very good post. :)