Search code examples
compass-sasscompassbootswatch

Error when recompiling themes from bootswatch using compass

I'm trying to reproduce the css files of bootswatch using compass but I receive error. My compass folders:

<project>
   |_ css
   |  |_ styles.css
   |  |_ ..........
   |_ fonts
   |   |_ bootstrap
   |_ img
   |_ js
   |_ sass
      |_ bootstrap
      |   |_ mixins
      |   |_ _variables.scss
      |   |_ .........
      |_ themes
          |_ _cerulean-bootswatch.scss
          |_ _cerulean-variables.scss
      |_ _bootstrap.scss
      |_ _custom-variables.scss
      |_ styles.scss

Compass uses last file styles.scss to produce styles.css. I created a folder themes and copied there the cerulean files: _cerulean-bootswatch.scss and _cerulean-variables.scss. I used the project files where all bootswatch themes reside.

Now, I follow the directions of the projects page:

SASS:

@import "bootswatch/theme/variables";
@import "bootstrap-sass-official/assets/stylesheets/bootstrap";
@import "bootswatch/theme/bootswatch";

with my structure these would be:

  1. import the theme variables (_cerulean-variables.scss)
  2. import the bootstrap partial (_bootstrap.scss)
  3. last import the relevant bootswatch partial (_cerulean-bootswatch.scss)

All the above happen at styles.scss:

// Import custom Bootstrap variables
// Bootswatch theme variables
//@import "themes/cerulean-variables"

// Import Bootstrap for Sass
@import "bootstrap";

// Bootswatch themes
@import "themes/cerulean-bootswatch"

If I un-comment /@import "themes/cerulean-variables" I receive error:

error sass/styles.scss (Line 29: Invalid CSS after "...tstrap for Sass": expected selector or at-rule, was "@import "bootst...")

and the styles.css contains the error:

"Error: Invalid CSS after \"...tstrap for Sass\": expected selector or at-rule, was \"@import \"bootst...\"\A         on line 15 of bs-compass-simple/sass/styles.scss\A \A 10: // Bootswatch theme variables\A 11: @import \"themes/cerulean-variables\"\A 12: \A 13: \A 14: // Import Bootstrap for Sass\A 15: @import \"bootstrap\";\A 16: \A 17: // Bootswatch themes\A 18: @import \"themes/cerulean-bootswatch\"

Am I missing something?

Solution

  • You have missed out two semi-colons. Should be:

    // Import custom Bootstrap variables
// Bootswatch theme variables
//@import "themes/cerulean-variables";

// Import Bootstrap for Sass
@import "bootstrap";

// Bootswatch themes
@import "themes/cerulean-bootswatch";

    Either that or you might need:

    // Import custom Bootstrap variables
// Bootswatch theme variables
//@import "themes/cerulean-variables"

// Import Bootstrap for Sass
@import "bootstrap"

// Bootswatch themes
@import "themes/cerulean-bootswatch"

    If Compass uses a different syntax than I'm used to with vanilla SCSS or you've set something to a non-standard configuration. Either way usage should be consistent. I'd suggest likely the former, since the lack of semi-colon would cause an error at @import "bootstrap" when the browser attempted to parse both of the lines together, instead of separately.