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) Getting Started with Sass Nesting Selectors

Jason Mc Dermott
Jason Mc Dermott
11,496 Points
Posted by Jason Mc Dermott
Jason Mc Dermott
11,496 Points

How are you getting what you put into the sass page to automatically appear in the css page.

I am brand new to Sass and am following along with a general understanding of what the process is best I can. I set up the --watch . in terminal for the sass page, but am at a loss how your making the code from the sass page automatically appear on the css page. Thank you for the feedback

5 Answers

Eric Erickson
Eric Erickson
7,776 Points
Eric Erickson
Eric Erickson
7,776 Points

As long as sass --watch . is running, when you save main.scss it updates main.css. You won't see it until you click on main.css in your text editor. That had me going for a while too.

Sebastien Thiroux
Sebastien Thiroux
11,474 Points
Sebastien Thiroux
Sebastien Thiroux
11,474 Points

You need to use a compiler to translate SASS and add the styles to your CSS page. You have different options for compilers : Compass, CodeKit, Koala, LiveReload etc. Some of them are more than compilers, like Compass for example. You should have a look at the sass website, this should clarify some areas for you.

Jason Mc Dermott
Jason Mc Dermott
11,496 Points
Jason Mc Dermott
Jason Mc Dermott
11,496 Points

thanks for the feedback guys, like I say newb over here ;)

Austin Harms
Austin Harms
8,680 Points
Austin Harms
Austin Harms
8,680 Points

I'm a newb too and Scout is working great for me. Easy to setup and it updates automatically as well.

Darren Kynaston
PLUS
Darren Kynaston
Courses Plus Student 15,610 Points
Darren Kynaston
Darren Kynaston
Courses Plus Student 15,610 Points

Make sure that when you run the "sass --watch" in command line / command prompt that the correct directory is shown in the command prompt i.e. the folder that your working on...

example:-

c:/desktop/myprojectfolder

to change the directory simply type "cd" into the command prompt followed by the correct path ... so in my example I would type into the command prompt - "cd c:/desktop/myprojectfolder"

After you have the correct directory showing in the command prompt type: "sass --watch scss:css" this will make sass watch for all the changes made to scss files in that particular folder (myprojectfolder) and write the changes to a new file with a .css extention in css.

To stop sass --watch running just type Ctrl-C when your in the command prompt and it will ask you if you'd like sass to stop watching - just type Y (for yes).

I hope this has made it a bit clearer for you and anyone else reading this that needed a little help.

Darren.