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 Introducing Mixins

Jeffrey Hall
Jeffrey Hall
9,065 Points
Posted by Jeffrey Hall
Jeffrey Hall
9,065 Points

Starting Sass help

I'm unclear how to get my Sass to interact with my CSS. I've started Ruby and have the Sass gem installed, but then what? Created a file called test.scss and then an identical file called test.css. I feel like I am missing some step to make them all interact.

3 Answers

Kelsey Jackson
seal-mask
.a{fill-rule:evenodd;}techdegree
Kelsey Jackson
UX Design Techdegree Student 63,504 Points
Kelsey Jackson
.a{fill-rule:evenodd;}techdegree
Kelsey Jackson
UX Design Techdegree Student 63,504 Points

In the folder that has the .scss file, type via the command line: sass --watch .(the period here is included in what you type, make sure there is a space between it and "--watch").

Ryan Carson
Ryan Carson
23,287 Points
Ryan Carson
Ryan Carson
23,287 Points

Adding to what Kelsey Jackson said above ...

Typing sass --watch . will cause Sass to 'watch' the folder for any changes in the .scss file. As soon as you save the .scss file, it'll automatically compile it into a .css file. For example, if you're editing main.scss and hit save, Sass will recompile it into the main.css file.

Sarah Hoopes
Sarah Hoopes
6,304 Points
Sarah Hoopes
Sarah Hoopes
6,304 Points

I had problems with this as well.

Try typing this into the Start Command Prompt with Ruby: sass --watch input.scss:output.css

So in my case, it looked like this: sass --watch main.scss:output.css

Doing this applies the changes you made in the scss file to the css file.

Also make sure that you are in the proper folder where both your files are saved.

I did notice one issue doing it this way: I have to manually update the css. after making changes to the scss. It doesn't happen automatically. I have to stop (Ctrl + c) the " --watch" in the command prompt. Next I re-enter sass --watch main.scss:main.css and then the two files are linked and reflect the changes that were made. Not sure why this is happening. I am using Notepad++ and not sure if that has anything to do with it.