CODEWITHSUNDEEP
csssasscompass-sass
legacyterror
legacyterror

Reputation: 149

Error with using Sass

Hello I am trying to use SASS in a project, but have come across a problem and I was wondering if anyone could help?

I have created two style sheets. One called defaults.scss and one called styles.scss. In the defaults.scss I have declared the following:

$mainColor: #848484;

I then try to call the $mainColor in my styles.scss using the following:

nav ul { 
 list-style: none outside none;
 margin: 0; font-size: 1.2em;
 color: $mainColor; 
 padding: 50px 0 0 0; 
 font-weight: bold; 
 text-align: center;
}

But I get the following error message: Syntax error: Undefined variable: "$mainColor".

Can anyone see what I am doing wrong? I have compass running.

Thanks.

Upvotes: 0

Views: 216

Answers (1)

sheriffderek
sheriffderek

Reputation: 9043

If understand correctly, you have two .scss files. What I normally do is have a styles.scss and in that file you import all of the other .scss style sheets. I think they call them partials or something. So that your main style.scss compiles all of the .scss files together into the .css file. Right now I don't think your two files are aware of each other. your main styles.scss should simply look like this:

@import "reset.scss";
@import "global.scss";
@import "structure.scss";
@import "colors.scss";
@import "etc.scss";

Make sure they are in your intended cascading order - because that is how they will be smushed together. In your case, default first and then main.

It gets tricky when you start adding media queries too - but this should fix you up I think.

In your html you just need to call your .css file that the whole operation outputs.

<link rel="stylesheet" href="css/style.css"> or wherever you have it going to. Just one.

Upvotes: 1

Related Questions