- Notifications
You must be signed in to change notification settings - Fork16
Enable Sass support for AEM
License
mickleroy/aem-sass-compiler
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
This bundle provides support for theSass CSS pre-processor in Adobe Experience Manager 6.1 or above.
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
| AEM | Sass Compiler |
|---|---|
| 6.3 | 1.0.x |
| 6.2 | 1.0.x |
| 6.1 (SP2 only) | 0.9.x |
- 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.
Install the provided OSGi bundle (.jar) in the latestreleasevia the Web Console.
- Start writing
.scssfiles just like you would write.lessfiles within AEM.
/etc/designs/clientlibs├── css.txt├── main.scss└── partials └── _base.scssThecss.txt file should only reference your main Sass file:
#base=.main.scssThe 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 CompilerSimilar 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.cssCurrently support LibSass version3.4.3.
LibSass is a C/C++ port of the original engine written in Ruby.More info athttps://github.com/sass/libsass
jsass is a feature complete Java wrapper of LibSass (requires Java 8).More info athttps://github.com/bit3/jsass
Create a release branch off themaster branch
git branch release/X.X.XPrepare the release (use vX.X.X for the tag)
mvn release:prepare -DpushChanges=falsePush the changes to the repository
git push originCheckout the newly created tag and build the project
git checkout tags/vX.X.Xmvn clean packageAttach the jar to the release on Github and merge back tomaster.
About
Enable Sass support for AEM