0

I created a theme on liferay 6.1 using the same css, jsp, js, images of classic theme (which is located in ROOT\html\themes\classic).

My copied theme works fine and all the standard css works except the compass and sass doesn't work.

COMPASS Version 0.12.2
SASS Version 3.2.1

My custom.css:

@import "compass";
@import "mixins";

@import url(custom_common.css);

$dockbarGradientEnd: #1273C7;
$dockbarGradientStart: #118ADE;

$dockbarOpenGradientEnd: #0993DD;
$dockbarOpenGradientStart: #0EA6F9;

/* ---------- Base styles ---------- */

.aui {
    .separator {
        border-color: #BFBFBF transparent #FFF;
        border-style: solid;
        border-width: 1px 0;
    }

    #wrapper {
        background: none;
        margin: 0 auto;
        padding: 2em 5em 0;
        position: relative;

        @include respond-to(phone) {
            padding-left: 0.5em;
            padding-right: 0.5em;
        }

        @include respond-to(tablet) {
            padding-left: 1em;
            padding-right: 1em;
        }
    }
/* etc....... */

In the Firebug i get this error:

Failed to load resource: the server responded with a status of 404 (Not Found)  http://localhost:8080/test-theme/css/compass

I don't know why the compass and sass works fine in classic theme but doesn't work in my theme that is identical to the classic theme. Why?!

Any help will be greatly appreciated! Thank you!

Mustapha Aoussar
  • 5,833
  • 15
  • 62
  • 107

2 Answers2

1

The fact itself that Firebug tells you it can't find compass means something has gone really wrong.

Compass is a pre-processor library, not a CSS framework (like bootstrap), the browser should never know about it.

Probably your build.${user}.properties in the Plugins SDK folder has something wrong. SASS compilation (CSS pre-processing) happens using the portal libraries, so the SDK must know correctly where the portal is.

Pier Paolo Ramon
  • 2,780
  • 23
  • 26
1

The issue is caused by the old campass library (compass-0.11.5) which has an issue in handling the transparent keyword. It got fixed in the latest campass library.

I followed this guide and i solved the problem: Resolve the "Sass::SyntaxError: Invalid CSS" error in Liferay 6.1

Mustapha Aoussar
  • 5,833
  • 15
  • 62
  • 107