Using Sass in AEM

[theo_nicolaou]

Hi,

I am looking for resources/articles/advice on how to use Sass (SCSS) within AEM. Our current setup is a Maven project which we paste the CSS files into (in the /etc/designs or /etc/clientlibs folders), the SCSS files are currently in a separate repository which uses Grunt to generate the CSS. So (when developing locally) there is a bit of copying and pasting between the Sass and AEM codebases and then the project is built using Eclipse.

Ideally I would like a set up within our AEM project whereby the CSS is built (but not versioned), and the SCSS files are just versioned. As a first step I am happy to have SCSS files just versioned and CSS built and also versioned. Could still use Grunt within the Maven project or any other alternatives if easier.

I had found a post on this forum from a few years ago - http://help-forums.adobe.com/content/adobeforums/en/experience-manager-forum/adobe-experience-manage... - but it doesn't really answer the question and the StackOverflow article that is linked refers to the fact that LESS is supported by AEM but Sass isn't.

I am hoping that someone on this forum has since had experience with the above and can advise! Are there any plans to support Sass within AEM?

Thanks

Theo

[smacdonald2008]

I am checking with our Product Management team. 

[theo_nicolaou]

Hi,

Just wondering if there is any update on this, or if anyone has any other advice they can give regarding my questions?

Thanks

Theo

[smacdonald2008]

I did not hear back - I did however send a new email. This does not seem like a common use case. Most ppl build projects via maven and control CSS and JS, etc using tools like Eclipse, Brackets, etc. 

[smacdonald2008 · Accepted solution]

Here is some feedback that should help you: 

We use it normally in most projects via this maven plugin https://github.com/eirslett/frontend-maven-plugin

That keeps the whole solution pretty tidy and nice, with the whole frontend running on a separate folder:  integrating node, gulp, grunt or whatever in the normal Maven build. 

You just need to add another task to copy the dist file in your aem clientlibs folder. 

[kalyan_venkat]

        You can use maven front end plugin which actually runs the grunt or gulp tasks based on configuration. For example if you want to use scss in your project, just after compiling scss to css move this files from your repository to ui.app...designs/myapp/clientlibs using grunt task. Its better to create a new folder in your code base where all your scss files reside and with the maven front-end plugin you could run list of grunt/gulp tasks where it compiles and move those files to appropriate designs folder.

[theo_nicolaou]

Thank you both, that's very helpful - I'll certainly be looking into using the plugin.

[mickjleroy]

I realize this thread is quite old but it is ranking well for "AEM sass" so in the interest of people being directed here...

I created a Sass compiler for AEM 6.2. It's still early days but it provides support for ".scss" files to be used in client libraries just like you would use ".less" files.

https://github.com/mickleroy/aem-sass-compiler

[vjetty]

Hi Theo

Here you can convert scss into css....

To compile scss files in your aem project use the following plugin in your ui.apps pom file. 

<!-- ====================================================================== --> <!-- SASS Plugin                                                         --> <!-- ====================================================================== --> <plugin> <groupId>nl.geodienstencentrum.maven</groupId> <artifactId>sass-maven-plugin</artifactId> <version>2.17</version> <executions> <execution> <phase>prepare-package</phase> <goals> <goal>update-stylesheets</goal> </goals> </execution> </executions> <configuration> <resources> <resource> <source> <directory>${project.parent.basedir}/ui.apps/src/main/content/jcr_root/etc/clientlibs/YOUR-PROJECT/scss</directory> </source> <destination>${project.parent.basedir}/ui.apps/src/main/content/jcr_root/etc/clientlibs/YOUR-PROJECT/css</destination> </resource> </resources> </configuration> </plugin>

Make sure you change path according to your project.

Thanks,

Vamsi