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

Development Tools

Totally confused with Sass / Compass / Ruby

I'm totally confused. I started the 'Sass Basics' course and tried to get Sass up and running. I'm on a Windows laptop. First I bought and installed Compass, because the sass website said that would be a good thing to do, even though I was still confused.

After that, Compass was running in my sys tray, but I quit it. Now I can't find it anywhere.

Then I opened a command prompt and wrote 'gem install ruby' (or sass, can't bloody remember which way round now). Then also 'gem install ruby'. I'm not sure to be honest, but I followed the video's instructions and:

  1. Created the test.scss file using Sublime text editor, and gave it p { color: blue; }
  2. Ran "sass test.scss". It ouputted p { color: blue; } . Fine.
  3. Ran "sass --watch ." And it seemed to be working.

However, when I make changes to test.scss, those changes do not affect the test.css file at all.

The test.css file looks like this: p { color: blue; }

/*# sourceMappingURL=test.css.map */

So, I'm at a complete loss. I wish I'd created a system restore point before starting all this - I'd roll back to that and start all over again.

Ok I think I've got my head around this whole thing. However, 'watch' is not updating the css file in realtime. And yes, I AM using the correct syntax, and I've also tried variations. It seems to me that sass just isn't working. What a waste of my time.

4 Answers

Chris Shaw
Chris Shaw
26,676 Points

Hi Andrew,

At the moment Sass 3.4.2 has an issue where --watch isn't working whereas 3.4.1 is so you can rollback to that version by doing the below.

gem uninstall sass
gem install sass -v 3.4.1

Once you've done that everything should start working.

Then I opened a command prompt and wrote 'gem install ruby' (or sass, can't bloody remember which way round now). Then also 'gem install ruby'. I'm not sure to be honest, but I followed the video's instructions and.

Just to clarify you don't need to run commands such as gem install ruby because Ruby is what allows the gem command to run therefore you wouldn't, dare I say shouldn't yield any results from the gem repository.

Absolute legend. I was up til 3.30am last night trying to solve this. I don't know why this solution isn't more accessible on the web. It should be. Thanks a million!

Might as well ask you another question(s) while I'm at it.

  1. What f**k is Compass? And why can't I find it on my PC, even though I've installed it?
  2. I'm quite familiar with the command prompt from the DOS days! :-D It's quite nostalgic using it again, and it's amazing how some commands were clearly hard-wired into my long-term memory. My question is, how does Ruby and Sass work? I don't understand any of this sh*t - I understand how an executable works, apps etc. But how you can put a command into the command prompt from anywhere and it does stuff. I don't get it. This is on another level to what I'm used to.
  3. I paid $10 for Compass, but that seems completely unnecessary now I see that you can run a compass install from the command prompt. I feel like I've been conned. Or am I missing something?

Pardon the French.

Chris Shaw
Chris Shaw
26,676 Points

What f**k is Compass? And why can't I find it on my PC, even though I've installed it?

Are you referring to the Ruby gem or Compass.app by KKBOX? If you're referring to the app most likely it's in your downloads folder whereas the gem will be in the folder where Ruby is installed which by default in on your C: drive.

I'm quite familiar with the command prompt from the DOS days! :-D It's quite nostalgic using it again, and it's amazing how some commands were clearly hard-wired into my long-term memory. My question is, how does Ruby and Sass work? I don't understand any of this sh*t - I understand how an executable works, apps etc. But how you can put a command into the command prompt from anywhere and it does stuff. I don't get it. This is on another level to what I'm used to.

Ruby gems work using a bit of PATH magic, on all operating systems a global path is defined that allows custom executables to run without the need to type their full path out, when for instance you type sass into any terminal window on Unix systems or into a command prompt on Windows that is the gem executable working it's magic as that is what tells the OS where the executable lives.

Essentially in a nutshell given the command you're trying to run has an executable assigned which every gem file does it will automatically be assigned as something that can be executed.

I paid $10 for Compass, but that seems completely unnecessary now I see that you can run a compass install from the command prompt. I feel like I've been conned. Or am I missing something?

Over time a lot of developers didn't like the idea of command only workflows so a few different companies started creating apps with bundled versions of Sass and Compass which sounds like a great idea as you can manage projects easily with them but they had a downside which is that when Sass for instance updated the app didn't so you get left behind.

There are some apps like CodeKit for OS X and PrePros for Windows that offer the ability to switch out the gems from the settings, for my personal needs I defer to the command line for most part as I use extra tools such as Grunt that I tie into the Sass and Compass compilation while also executing other tasks at the same time.

At home I love to use CodeKit on my MacBook Pro as it offers a giant range of features but at work as I said above I defer to command line.

Julie Vandebosch
Julie Vandebosch
10,360 Points

Can you explain why it adds /*# sourceMappingURL=main.css.map */ to my css file? I can't see it in the videos.

Chris Shaw
Chris Shaw
26,676 Points

`/*# sourceMappingURL=main.css.map */

This line tells your browser, if it supports CSS source maps which currently are Firefox and Chrome where to look for the map on your local file system relative to you main.css file.

This file gets generated by default as of Sass 3.4 and you can disable it if you don't need it by running the watch command below.

sass --watch scss:css --sourcemap=none

If you do want source maps for debugging your Sass code in a web browser see the following link which explains how to use them in detail.

http://thesassway.com/intermediate/using-source-maps-with-sass

Julie Vandebosch could you please create your own thread on the forum the next time around, your question is perfectly fine in this thread but it's becoming a tad long so I don't want other students becoming confused by the above and below replies.

Cheers, Chris. What do you do at work that means you like to use Sass?

Chris Shaw
Chris Shaw
26,676 Points

As I said above I use CLI at work because I use other tools such as Grunt which part of the NPM repository aka NodeJS but I won't go into the details, the sites I build at work require much more robust compilation and optimization which I use Grunt for as it allows me to run other tasks ahead and after Sass such as image crunching before hand and Autoprefixer afterwards.

Also a tool like Grunt is grunt in team situations as it allows you to build up an complete build script that anyone can use without having to setup the same thing more than once.

Thanks - I think my question wasn't very well phrased. I was actually wondering what sort of work you do generally. I'm trying to build up my knowledge of the industry, different types of jobs, teams etc etc.

Chris Shaw
Chris Shaw
26,676 Points

Oh, I'm a Front End developer for a company in Melbourne, Australia called Authentic Entertainment. Generally my role is to build client sites from the ground up both there are times where I'm booked to retrofit a site which essentially means I go in and restructure it using a new design and possibly update the JavaScript if it needs some love.

I really enjoy the front-end side of coding - using code and seeing visual results. However, I've never been a visual artist, so I can't really see myself being a designer, creating wonderful aesthetics. Is there a place in the industry for people like me? Coding front-ends and making all that work, but not being great with the overall aesthetics?