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 Installing Sass and Setting up the Project The --watch Command

Luke Gibson
Luke Gibson
4,822 Points

my watch command isn't creating a css file? so my html page isn't recognising the styles.

for some reason once I follow the steps in this video my scss file remains there and when I type everything into the terminal there are no files created with the css inside? is this normal or am I going wrong somewhere?

12 Answers

Please right click the file and click Get Info. After that you can see the section Name & Extension, change the extension to *.scss

Bertan Ulusoy
Bertan Ulusoy
18,047 Points

Hi Luke, If you try to write command in your terminal(within your css directory) like sass --watch **.scss or sass --watch . , it should create a **.css file for you.

I'm having the same issues as well, no css files are being generated.

Let me clarify: I went ahead and deleted the provided css file as instructed, and entered the watch command expecting the css folder to auto generate. It did not. I also don't appear to be getting any green text in the command line like in the video.

Bertan Ulusoy
Bertan Ulusoy
18,047 Points

Hi Eddie, The important file is sass file, not css file. Do you have a sass file in your css folder? Secondly, Is there any output when you type to your terminal sass --version ?

Version Sass 3.4.13 (Selective Steve)

I'm trying to keep my sass and my css stylesheets separate so the sass file is not in the css folder, it's in a separate sass folder in my main site directory. The command I'm trying to execute is sass --watch scss:css, as explained in the video.

I think I figured out the problem now, but still not sure on a solution. When I attempt to rename the style.css file provided in the project files to style.scss, my computer still reads the file as a css file. I know this because when I open the file in sublime and try to save it, it automatically adds a .css extension on the end of it creating a style.scss.css file. Is there some sort of setting I should be aware of to disable this?

Bertan Ulusoy
Bertan Ulusoy
18,047 Points

Hi eddie,

I understand that you want to create scss and css files in separate folders.

I simulated your problem and I created a sample project.

The project has directories; /css /scss /img index.html

I have sample.scss file in scss directory.

In terminal or command prompt I write this command: inprojectdirectory> sass --watch scss:css

scss:css means that, it watches scss directory and output sample.css file to css directory.

is it clear?

Johan Rönkkö
Johan Rönkkö
28,054 Points

I have the same problem.

my css --> webbpage/css/main.css my html --> webbpage/index.html

I created a new map, scss, and moved my main.css to it. I then renamed the css file to main.scss so it looks like this: my css --> webbpage/css/ my html --> webbpage/index.html my css --> webbpage/scss/main.scss

After typing the watch-command it does not work. Like Eddie the the commands did not create any new files in my css folder. I also didnt get the: *write css/main.css *write css/main.css.map In the terminal?

Bertan Ulusoy
Bertan Ulusoy
18,047 Points

Hi Johan, I need to see your command and terminal directory to solve your problem. You can send print screen of your terminal.

Johan Rönkkö
Johan Rönkkö
28,054 Points

My sass is working great now, thank you.

Luke Gibson
Luke Gibson
4,822 Points

how did you get it to work?

Johan Rönkkö
Johan Rönkkö
28,054 Points

i dont know acutally. I recreated my project folder a couple of times and i think i restarted my computer then it worked. It was like if the mac hadnt installed it correctly at first or needed to update

Luke Gibson
Luke Gibson
4,822 Points

just noticed I have the same problem as Eddie, it automatically saves to to style.scss.css I think this must be stopping it... some help on this would be massively appreciated! it's driving me insane hahaha

Hi Luke, I had the same problem but I've solved it and I don't know if you still need an answer but I will still post anyway.

If you are on a mac, use the command line or terminal to change directory (cd) the scss folder or directory and then rename the file by typing the command like below:

sudo mv style.scss.css ./style.scss

Then change directory (cd) to the project directory or folder and run:

sass --watch scss:css

Now everything should work!!

I was having the same problem that a lot you Sassers were having, on my Windows-based computer. I don't know if this is the best solution, but moving your project to a different directory might solve the problem. I noticed that working off of the desktop, for some reason, prevented Sass from creating a .css file from .scss file.

Katarzyna Walsh
Katarzyna Walsh
24,409 Points

I have the same problem --> the --watch command is not creating a css file. I followed Guil's instructions step by step. I also tried moving my project to a different directory as Antoni suggested and changing the file name by typing in sudo mv style.scss.css ./style.scss as suggested by Nonso but still no luck...

Katarzyna Walsh
Katarzyna Walsh
24,409 Points

OK, I've solved it! The file extension was causing the problem. I opened a new file in sublime text, named it style.scss and copied in contents from style.css (otherwise, the file would not let me change its extension to .scss)