title: SASS and Liferay - how to use in custom themes?
body: <p>I don't really find an answer on liferay's blogs and google - so i hope anyone here can help me.</p>
  
  <p>I'm trying to get started with sass in a custom theme i am building in liferay 6.2.</p>
  
  <p>As i understand it, the approach would be this:</p>
  
  <ol>
  <li>create an empty theme, (using maven,) based off _styled</li>
  <li><p>this gives me a file layout like this:</p>
  
  <pre><code>&lt;theme&gt;
    +-src
       +-main
          +-webapp
             +-css
                +- ... here i'll put any css overwrites
  </code></pre></li>
  <li><p>develop sass stylesheets, link to <code>main.css</code></p>
  
  <pre><code>&lt;theme&gt;
    +-src
       +-main
          +-webapp
             +-css
                +-main.css
                +-custom.scss
  </code></pre></li>
  </ol>
  
  <p><em>main.css</em> initially looks like this:</p>
  
  <pre><code>@import url(custom.css);
  
  /* other css import here */
  </code></pre>
  
  <p><em>custom.scss</em> would contain some SASS content:</p>
  
  <pre><code>$color: #f00;
  body {
      color: $color;
  }
  </code></pre>
  
  <p>Now my question: How do I link both CSS and SASS together correctly? How does the <code>@import</code> statement in <em>main.css</em> have to be defined?</p>
  
  <p>I tried <code>@import url(custom.scss);</code> but this won't give me the desired results. Likewise, <code>@import url(custom.css);</code> won't do it either.</p>