Getting started with SASS using Maven

I’ve already talked about how to create a web project with maven. Now let’s just a simple way start using Sass in you web projects.

Sass Maven Plugin

There’s several plugins for using Sass in Maven. I’ve tried the official but didn’t work for me. So I’m using the sass-maven-plugin from jasig.

Add the maven sass plugin to your project:

<plugin>
  <groupId>org.jasig.maven</groupId>
  <artifactId>sass-maven-plugin</artifactId>
  <version>1.1.1</version>
  <configuration>
    <resources>
      <resource>
        <source>
          <directory>${basedir}/src/main/sass</directory>
        </source>
        <destination>${project.build.directory}/css</destination>
      </resource>
    </resources>
  </configuration>
</plugin>

Now we can start listening to changes on our scss files to auto generate:

$ mvn sass:watch
[INFO] Scanning for projects...
[INFO]
[INFO] --------------------------------------------------------------------
[INFO] Building ZWebApp Webapp 1.0-SNAPSHOT
[INFO] --------------------------------------------------------------------
[INFO]
(...)
[INFO]     >> /Users/kimus/Develop/maven/ZWebApp/src/main/sass/custom.scss => /Users/kimus/Develop/maven/ZWebApp/target/css/custom.css
[Listen warning]:
  Listen will be polling changes. Learn more at https://github.com/guard/listen#polling-fallback.

Alternatively we can generate on demand:

$ mvn sass:update-stylesheets
[INFO] Scanning for projects...
[INFO]
[INFO] --------------------------------------------------------------------
[INFO] Building ZWebApp Webapp 1.0-SNAPSHOT
[INFO] --------------------------------------------------------------------
[INFO]
(...)
[INFO]     >> /Users/kimus/Develop/maven/ZWebApp/src/main/sass/custom.scss => /Users/kimus/Develop/maven/ZWebApp/target/css/custom.css
[INFO] --------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] --------------------------------------------------------------------
[INFO] Total time: 2.568 s
[INFO] Finished at: 2015-04-03T20:39:15+01:00
[INFO] Final Memory: 18M/302M
[INFO] --------------------------------------------------------------------