Adobe CQ and SASS/SCSS

Question

I would like to ask if adobe CQ support SASS/SCSS? Has anyone experience with it?

Answer 1

@diffa is right in that there is no native support for SASS, however LESS is accepted. If you don't want to go the LESS route, an SASS integration isn't that hard. We are currently using a SASS/Compass [with a sass template http://www.archetypecss.com/] integration with our development stack.

To frame things up we're using a very simple MVN project to build our application. Before SCSS our project looked something like

Maven/
  bundle/
    /path/to/our/java
  content/
    /path/to/our/jcr_root (apps/etc)

We added a folder to this project

Maven/ sass/ config.rb

Then in our Config.rb we set the SCSS directory and target CSS directories to our etc/design folder so, this way we could keep our SCSS where we want our CSS to compile to. We then hooked up the compass compile command into our build script. Which simplified is someting like:

compass compile 
mvn clean
mvn build

If you aren't using maven, you could do the same thing as long as in your config.rb you set the correct paths for your src scss/sass files and then you set the target compile directory to your design category in /etc

Some other things we've done are to exclude scss files from our pom.xml so that maven just builds in the compiled css and then remove our compiled CSS files from our versioning system. This allows our team to version the scss while not having to worry about scss files floating around our JCR doing nothing.

Example Workflow:

1. Dev makes sass changes
2. Dev runs build script
3. Dev checks local

if we were not on Maven and we were using something like vlt it would be something like

1. Dev makes sass changes
2. Dev runs compass compile (or at this point compass watch might be more suitable)
3. Dev runs vlt/pckmgr/whatever here
4. Dev checks on local

Example File:

maven/
  bundle/
    /path/to/javas
  content/
    /src/main/content/jcr_root/
      etc/designs/myproj
        /css
          main_styles.sass  <= src
          main_styles.css   <= compiles to
  maven/
    config.rb
      sass_dir = ../content/src/main/content/jcr_root
      css_dir = ../content/src/main/content/jcr_root

If you notice, I set the sass and css directories to be the jcr_root. This allows us to put sass files anywhere in the jcr_root (whether it's all in etc/designs or we needed special scss in a component in apps, the files will compile).

.........

It's a bit of hook up, but it's definitely worth it.

Answer 2

There is no built-in SASS support, but there is support for LESS. There is a maven plugin for SASS, although I have not used that. It's been suggested that anyone wanted this could raise a daycare request for enhancement.

Answer 3

I realize this thread is quite old but it is ranking first 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

Answer 4

Building on user @diffa comment, I'd like to propose grunt-clientlibify as a solution to integrate a front-end project containing SASS files with AEM. Once the SASS files are processed and generate CSS files, the resulting files can be fed to this plugin to generate a CRX package to be optionally deployed to an AEM instance. See below for code sample:

grunt.initConfig({
  clientlibify: {
    options: {
      // path to your processed SASS files
      cssDir: 'assets/styles/css'
    }
  }
});

Answer 5

October 2017

This SASS Compiler Plugin for AEM worked very well and it was very easy to setup.

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

Good Luck!