Sass Compiler for AEM 6.1+

This bundle provides support for the Sass CSS pre-processor in Adobe Experience Manager 6.1 or above.

Features

Supports all the latest features of Sass:

• Variables
• Nesting
• Partials
• Imports
• Mixins
• Inheritance
• Operators

Examples of supported @import directives:

@import 'file';
@import 'file.scss';
@import 'partials/file';
@import 'partials/file.scss';
@import 'file1', 'file2';
@import '/etc/designs/aem-sass-compiler/clientlib/file';
@import '/etc/designs/aem-sass-compiler/clientlib/file.scss';

If any one of the conditions below are met, the @import will be skipped and compiled to a CSS @import:

• The file’s extension is .css
• The filename begins with http://
• The filename is a url()
• The @import has any media queries

Supported AEM versions

Installation

Via Maven (preferred)

• Add the following dependency to your POM:

<dependency>
    <groupId>com.github.mickleroy</groupId>
    <artifactId>aem-sass-compiler</artifactId>
    <version>1.0.1</version>
</dependency>

Note: replace "1.0.1" with the latest version of the compiler.

• In your content-package-maven-plugin configuration, add an embedded entry for the compiler:

<plugin>
    <groupId>com.day.jcr.vault</groupId>
    <artifactId>content-package-maven-plugin</artifactId>
    <extensions>true</extensions>
    <configuration>
        <embeddeds>
            <embedded>
                <groupId>com.github.mickleroy</groupId>
                <artifactId>aem-sass-compiler</artifactId>
                <target>/apps/my-aem-project/install</target>
            </embedded>
        </embeddeds>
        <!-- other entries... -->
    </configuration>
</plugin>

Note: replace "/apps/my-aem-project/install" with your own project path.

Via Web Console

Install the provided OSGi bundle (.jar) in the latest release via the Web Console.

Usage

• Start writing .scss files just like you would write .less files within AEM.

/etc/designs/clientlibs
├── css.txt
├── main.scss
└── partials
    └── _base.scss

The css.txt file should only reference your main Sass file:

#base=.
main.scss

Bundle Install Log

The following log entries should be visible when installing the bundle:

*INFO* [...] com.adobe.granite.ui.clientlibs.impl.CompilerProviderImpl Registering client library compiler scss
*INFO* [...] com.github.mickleroy.aem.sass.impl.SassCompilerImpl Activating Sass Compiler

Sass Compilation Log

Similar log entries should be visible when compiling a .scss file:

*INFO* [...] com.adobe.granite.ui.clientlibs.impl.HtmlLibraryManagerImpl Start building CSS library: /etc/designs/aem-sass-compiler/clientlib
*INFO* [...] com.github.mickleroy.aem.sass.impl.SassCompilerImpl Compiled Sass in 97ms
*INFO* [...] com.adobe.granite.ui.clientlibs.impl.HtmlLibraryManagerImpl finished building library /etc/designs/aem-sass-compiler/clientlib.css

Implementation Details

Currently support LibSass version 3.4.3.

LibSass is a C/C++ port of the original engine written in Ruby. More info at https://github.com/sass/libsass

jsass is a feature complete Java wrapper of LibSass (requires Java 8). More info at https://github.com/bit3/jsass

Release

Create a release branch off the master branch

git branch release/X.X.X

Prepare the release (use vX.X.X for the tag)

mvn release:prepare -DpushChanges=false

Push the changes to the repository

git push origin

Checkout the newly created tag and build the project

git checkout tags/vX.X.X

mvn clean package

Attach the jar to the release on Github and merge back to master.