JarCastingSass 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
| AEM | Sass Compiler |
|---|---|
| 6.3 | 1.0.x |
| 6.2 | 1.0.x |
| 6.1 (SP2 only) | 0.9.x |
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-pluginconfiguration, add anembeddedentry 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
.scssfiles just like you would write.lessfiles 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.