CODEWITHSUNDEEP
compilationsass
Akel
Akel

Reputation: 73

SCSS/SASS Not loading custom styles

Dove into SASS this morning for the first time, and I am impressed with the potential...but I am having a slight issue.

(Using Gumby Responsive framework)

So far, I can't seem to get the _custom.scss to compile with everything else. 

// Your custom SCSS should be written here...
$color: #0066a6;

body{
    background: $color;
}

I added the above to the _custom.scss, went to the command prompt, typed "compass compile" and it returned "unchanged sass/gumby.scss" I also tried "compass compile sass/_custom.scss" and all that did was create a "custom.css" that (of course) was not showing up either.

What am I doing wrong?

Upvotes: 0

Views: 5745

Answers (2)

Akel
Akel

Reputation: 73

Solution Found

Was the weirdest thing...opened the "gumby.css" (was a last ditch, "i'm getting super peeved" moment) hit select all -> delete -> save -> close

Then headed back to the command prompt, did the 'compass compile' command, and somehow voila...apparently I just needed to delete everything in the original gumby.css before continuing, because then it recreated the css file with the @import partials working.

Upvotes: 0

agconti
agconti

Reputation: 18093

By using the _ at the beginning of your stylesheet name, your using a sass partial. That tells sass to not create standalone stylesheet for _custom.scss at compile time.

Remove the partial to make sass create the sheet: ie. rename it to custom.scss

or keep the partial and import it into your main stylesheet with:

@import "custom";

Example, two sheets _reset.scss and base.scss:

/* _reset.scss */

html,
body,
ul,
ol {
  margin:  0;
  padding: 0;
}
/* base.scss */

@import 'reset';

body {
  font-size: 100% Helvetica, sans-serif;
  background-color: #efefef;

Here _reset.scss wont be compiled into its own standalone sheet ( because of the partial), but will be included in the base.scss sheet right before the body declartion ( because base.scss isnt a partial). The output would look like this:

/* base.scss */

html,
body,
ul,
ol {
  margin:  0;
  padding: 0;
}

body {
  font-size: 100% Helvetica, sans-serif;
  background-color: #efefef;

Make sure your compass configuration is setup correctly. First initiate your project with:

compass create path/to/project --sass-dir=[your_sass_dir]

Then you'll have a config file called config.rb. It should look something like this:

# Location of the theme's resources.
css_dir         = "css"
sass_dir        = "sass"
fonts_dir       = "css/fonts"
extensions_dir  = "sass-extensions"
images_dir      = "images"
javascripts_dir = "js"

Upvotes: 1

Related Questions