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

Tom Bedford
Tom Bedford
15,645 Points

Use CSS? Scared of Sass? Don't be!

I've been aware of Sass for a while now but never pushed myself to go into it due to things like not knowing much about "the terminal", plus being on Windows I can't access awesome things like Hammer to make it super easy to start.

I was so very wrong.

If you use CSS please learn Sass, it will save you huge amounts of time (days and weeks, not minutes and hours).

If you are wanting to avoid terminal/command line stuff you can install Scout and be ready to use with Sass in a few minutes. Here is a quick setup video.

You can also use Codepen to try out Sass without needing to install anything. See this example where you can switch back and forth between Sass and the outputted CSS by clicking the "(SCSS)" at the top next to CSS.

My CSS will never be the same!

Hi Tom, I looked at Sass last night. I must say after the first few videos I was confused with all the racing back and forth.
I'm also on windows. I do have have ruby for windows installed. I was able to install the ruby gem for sass, but that is as far as I got. I use N ++ and don't know if I can use it for sass.(could not save scss file with it) I also dont want to be slowed down with the learning curve of sublime as I've had good momentum with N++.. I did install scout but have no idea how to use it. I'm interested in learning sass just need a better breakdown of how to get started. I'll check out some more tutorials on it at some point but any suggestions is appreciated. Thanks. Steve

Tom Bedford
Tom Bedford
15,645 Points

Hi Stephen DelBuono , check this screencast for getting started with Scout.

You should have no problems using Notepad++ with Scout/Sass. If you can't save a file as .scss you can always make a text file and manually change the extension (I would try altering the extension to .scss in the N++ save dialogue box and see what happens as I suspect that will work). You may also want an addon to enable syntax highlighting if this isn't included by default with N++.

Here's some documentation on the Sass output styles that I mention in the screencast.

Tom,
That screencast was great! Thank you for doing that. Very helpful. I'm sure I'll be watching again and give Sass some more practice. I'll check out the links as well. I do appreciate your help and look forward to start using these skills. Best Regards, Steve

2 Answers

I would love to see a "deep dive" LESS also.

I'd prefer we all forget LESS exists and use a better system.

James Barnett
James Barnett
39,199 Points

This article on the problem with CSS preprocessors offers some great points.


> That’s not to say that preprocessing doesn’t have a home with smaller projects, too. But in our opinion, it’s a little like using a sledgehammer to hang a nail for a picture.

from: http://www.nosleepforsheep.com/development/using-a-css-preprocessor/


> I think that preprocessors can be abused by lazy developers. They don’t encourage bad habits as such, but they make it easier to disregard good habits. I’d also like to see a standard abstraction emerge from all the current choices and have that implemented for various runtimes.

from: http://timwhitlock.info/blog/2013/02/css-pre-processors-good-or-evil/

In regards to that first article, as soon as CSS has native unit math and variables, then maybe, but until then I call BS. And if your code is MORE complex with a preprocessor and not less complex, you're writing bad code. I don't care if it's longer, I care that it's more readable, sensible and maintainable. Length is meaningless because I'm compiling the code anyway.

In the second, Whitlock is absolutely correct but preprocessors are irrelevant in that equation. People write bad CSS because they write bad CSS. They wrote bad CSS before preprocessors and it's only continued. You see these boards every day, people come on here asking about grids and responsive and all kinds of crazy stuff without even understanding the box model or inheritance or float or specificity or any number of fundamental notions. CSS seems very simple but it's not. The problem is you can write tons of CSS without ever needing to know these fundamental notions. CSS frameworks have made the problem worse (better?) by holding hands throughout the process.

Tom Bedford
Tom Bedford
15,645 Points

Hi James

It's always good to hear about others experiences and thoughts, thanks for the articles. My knowledge of Sass is very early. For things like storing colour codes as variables, reducing repeated code, math and colour functions (lighten, darken, desaturate etc) it seems like it will be a huge time saver for me.

If excessive use of mixins/extenders creates harder-to-deal-with code then that should be a concern for the particular project affected. However, just looking at Sass' most basic functionality it offers some great options.

I'm sure many technologies can be "abused" if not implemented with care. It would be interesting to hear your own thoughts on the subject if you have used Sass (or something similar) for any projects and if you found any merit in it?

I wrote the topic to encourage other people to try it out as I can see the difference Sass would have made on many of my projects if I had tried it earlier on.

James Barnett
James Barnett
39,199 Points

Writing DRY-er code can also help in reducing repeated code as well as using OOCSS.

Check out this tech talk on writing tactical HTML & CSS