Starting with version 1.3.0, SassCss resource processor was added. It supports the following features:

Comments

// foo
body
  // bar
  a
    :color #fff

compiles to

body a {
  color: #fff;}

Variables

!red = #ff0000
body
  :color !red
and

red: #ff0000
body
  :color !red

compiles to

body {
  color: #ff0000;}

Selector Continuations

a
  :color #fff
  &:hover
    :color #000
  &.active
    :background #888
    &:hover
      :color #fff

compiles to

a {
  color: #fff;}

a:hover {
  color: #000;}

a.active {
  background: #888;}

a.active:hover {
  color: #fff;}

Literal Javascript

type: "solid"
size: 1
input
  :border { parseInt(size) + 1 }px {type} #000

compiles to

input {
  border: 2px "solid" #000;}

Property Expansions

div
  =border-radius 5px

compiles to

div {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;}

Mixins

 +large
   :font-size 15px
 +striped
   tr
     :background #fff
     +large
     &:odd
       :background #000
 table
   +striped
   :border none

compiles to

table {
  border: none;}
table tr {
  background: #fff;}
table tr {
  font-size: 15px;}
table tr:odd {
  background: #000;}

Configuration

In order to use SassCss feature, you have to follow the following steps:

Add wro4j-extensions dependency

Add to the pom.xml of your project wro4j-extensions dependency:

  <dependency>
    <groupId>ro.isdc.wro4j</groupId>
    <artifactId>wro4j-extensions</artifactId>
    <version>1.3.0</version>
  </dependency>

web.xml configuration

configure wro4j this way in web.xml :


  <filter>
    <filter-name>WebResourceOptimizer</filter-name>
    <filter-class>
      ro.isdc.wro.http.WroFilter
    </filter-class>
    <init-param>
      <param-name>configuration</param-name>
      <param-value>DEPLOYMENT</param-value>
    </init-param>
    <init-param>
      <param-name>managerFactoryClassName</param-name>
      <param-value>ro.isdc.wro.extensions.manager.ExtensionsConfigurableWroManagerFactory</param-value>
    </init-param>
    <init-param>
      <param-name>uriLocators</param-name>
      <param-value>servletContext,classpath,url</param-value>
    </init-param>
    <init-param>
      <param-name>preProcessors</param-name>
      <param-value>cssUrlRewriting,cssImport,bomStripper,semicolonAppender,sassCss</param-value>
    </init-param>
    <init-param>
      <param-name>postProcessors</param-name>
      <param-value>cssVariables,cssMinJawr,jsMin</param-value>
    </init-param>
  </filter>

Notice the sassCss in param-value tag of preProcessors. Adding this value to the list will add in the chain of preprocessors the SassCssProcessor which does the magic. Another alternative to configure the filter, is by extending ExtensionsConfigurableWroManagerFactory, setting inside the implementation the processors to use and their order and using your implementation as a value for managerFactoryClassName init-param.

More details about this can be found here: ConfigurableWroManagerFactory.