Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Sass Basics (retired) Variables, Mixins, and Extending Selectors Defining Variables

Vincent Bellittera
Vincent Bellittera
20,411 Points
Posted by Vincent Bellittera
Vincent Bellittera
20,411 Points

My $primary-color variable will not work on my styles.scss page!!! HELP ME!!!

I am in Sass Basics, and I was just introduced to variables. I have my .scss and .css page opened in Sublime, Git Bash is open and WATCHING for changes. Everything is working great, but now I added $primary-color: #333, and added that to my body rule and it will not work. PLEASE HELP ME.

5 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Vincent,

It should be at the top of the file and not inside your body rule if that's what you did.

In order for anything to be that color though you have to set a properties value to that variable.

Examples: background: $primary-color or color: $primary-color

Those example declarations would be inside one of your css rules.

Vincent Bellittera
Vincent Bellittera
20,411 Points
Vincent Bellittera
Vincent Bellittera
20,411 Points

Here is what I have.

/* scss document */

$primary-color: #333;

body { background: primary-color; font-family: Futura, "Trebuchet MS", sans-serif; > h1 { font-size: 3em; color: #eee; margin: 5px 0 0 5px; } }

.entry { background: white; margin: 5px; padding: 5px; h1 { font-size: 1.2em; margin: 0px; } .date { font-size: 0.3em; color: #333; } a { color: #333; } }

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

You left off the $ when using the variable for the body background color.

Vincent Bellittera
Vincent Bellittera
20,411 Points
Vincent Bellittera
Vincent Bellittera
20,411 Points

How funny!!! Thanks so much... It was driving me crazy!!

Stephen Goeddel
Stephen Goeddel
11,239 Points
Stephen Goeddel
Stephen Goeddel
11,239 Points

did you end that with a semi-colon? ex.

$primary-color:#333;
please show me your CSS rule as well.

Vincent Bellittera
Vincent Bellittera
20,411 Points
Vincent Bellittera
Vincent Bellittera
20,411 Points

Hey Guys, I had another quick question. I am using Sublime Text 2, and when I am working on a .scss file I am not getting the color coded prediction as I write the code. Everything works fine in .html and .css files. In the tutorial with Hampton, his .scss file is color coded just like all the other files. Am I doing something wrong?

Stephen Goeddel
Stephen Goeddel
11,239 Points

quick search leads to this plugin: https://sublime.wbond.net/packages/SCSS

Vincent Bellittera
Vincent Bellittera
20,411 Points
Vincent Bellittera
Vincent Bellittera
20,411 Points

Thanks Stephen. I just installed Emmet earlier today. I didn't even think to look in there for a fix for this problem... Thanks so much, I really appreciate the help!