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 CSS to Sass Refactoring with Sass Color Variables

Leigh Maher
Leigh Maher
21,830 Points
Posted by Leigh Maher
Leigh Maher
21,830 Points

Should I import a _colors.scss into _extends.scss?

I've set up a style for the background of a container section of my site. It applies to a few different containers so I created an extend for it. Within the extend I want to include a variable name of a color instead of writing it out. To make this work I had to import the _colors.scss into the _extends.scss using @import 'colors';

It worked but is this good or bad thing to do?

Thanks.

3 Answers

Dale Bailey
Dale Bailey
20,269 Points

Yeah I wouldn't do that. Ideally you have one main scss file that imports all others, then you convert that to css. you import the child scss files in the order they would need to be loaded in css for example;

@import 'normalize';
@import 'framework';
@import 'colors';
@import 'mixins';
@import 'text';
@import 'content';

Above is my whole main scss file for a website, everything is defined in the child scss files. All child scss files should be prefixed with an underscore in the filename so that sass ignores it in any css conversions.

Leigh Maher
Leigh Maher
21,830 Points
Leigh Maher
Leigh Maher
21,830 Points

Thanks for your reply, Dale. Yes, this is the set up I have. However, I need to include a variable in the _extends.scss file, so how do I get the _variable.scss talking to the _extends.scss file if I don't connect them in some way?

I said _colors.scss above. I meant to say _variables.scss.

Dale Bailey
Dale Bailey
20,269 Points

You don't connect them directly, all of your children's code pours into the main scss in the order you put it in, so as long as your _variable.scss is imported above the _extends.scss inside the main.scss it will cascade down. For example:

@import 'variable.scss';
     // inside it says:
     $red: #ff4800;
@import 'extends.scss';
     // inside it says:
     .red_box {
          background-color: $red;
     }

Because the variable scss was before the extends scss the variable called in the extends code has been set. Remember your only dealing with one file ultimately (the main.scss file), all of it's children are for ease of development only, it still gets outputted into one giant file for the browser.

Leigh Maher
Leigh Maher
21,830 Points
Leigh Maher
Leigh Maher
21,830 Points

Ah ha, of course. Thanks a lot for the explanation, Dale. Working perfectly now!