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

James Kraai
James Kraai
26,167 Points

Arguments across multiple Sass files

I'm having trouble setting up multiple Sass files joining into 1 main.scss then compiling into main.css. When I have _variables.scss _mixins.scss main.scss Sass returns an error when I use a variable from _variables.scss in _mixins.scss.

Example In _variables.scss $fontColor: #515151;

_mixins.scss @mixin typography ($fontColor) { h1 { color: $fontColor; } }

main.scss @import '_variables.scss'; @import '_mixins.scss';

Sass returns that $fontColor is an undefined argument in _mixins.scss even though I'm importing each and its only compiling main.scss to main.css.

I'm missing something and any help is appreciated!

3 Answers

Gareth Redfern
Gareth Redfern
36,217 Points

Try removing the _ before each of your file imports. I think that should do it.

so

@import 'variables.scss'; etc.

James Kraai
James Kraai
26,167 Points

That is allowed but it didn't fix my problem. I figured out that I have to @include my mixin and pass in the variable. @include typography ($fontColor);

Gareth Redfern
Gareth Redfern
36,217 Points

Glad you got it sorted :)