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

Kevin Korte
Kevin Korte
28,149 Points
Posted by Kevin Korte
Kevin Korte
28,149 Points

CSS, Sass, and reducing server requests?

Here is something I haven't directly seemed answered. I have recently got into the wonderful world of Sass.

I know that valid CSS is valid Sass (duh).

I know that Sass has the @import feature which works nicely and imports at compile time. (unlike CSS's @import feature)

I know that the fewer server request your site makes, the better.

So...can you see where I'm going with this?

If you're building a site...and lets say you're using a framework, and you have your style sheet, and maybe a plugin or two with it's own tiny style sheet. Could you not save those CSS files as their own partial Sass file, and than @import them in your main stylesheet, thus sending only one big CSS file (and only 1 request) to the browser, not 3 or 4.

You can still retain the CSS's cascading effect inside the compiled stylesheet by how you around your order of @imports in you Sass file.

Would this not work, and not be a good thing to do? It seems too good to be true.

2 Answers

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

You are exactly right that's one of the major benefits of Sass in fact someone wrote an article on that very topic

http://sawmac.com/2012/06/why-use-sass/

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Awesome. I've been creeping the web for the past few weeks on Sass since that's about how long I've been using it, and hadn't seen that article or this idea being addressed. Seemed like a great idea, loving having small, broken down partial scss files.

Glad to see that the idea is good!

Also digging the mixins, variables, and extends. I've only scratched the surface. Thanks James!

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Using variables has got the be # 2 on the list, it's great for colors and for CSS3 stuff like border radius & linear gradients.

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

And subtle box shadows on elements in a modular design. I never have to write

0 1px 3px rgba(0, 0, 0, 0.3)

more than once now!

Paul Graham
Paul Graham
1,396 Points

Sass also is the correct choice when talking about simple CSS compression. It's faster and has more options than YUI.

I agree with you that extends and variables are 1A and 1B but another feature I find critical is the math module. Having the ability to write formulae enables you to make a proper grid system or typographic rhythm in minutes instead of hours. I just wrote a two layout responsive site where I did the layout with Susy and it was 4 variables and about 20 lines of code. It really isn't important that it's shorter though, because it still takes hours to calculate everything you need in design, it's important that it's maintainable and easy to change.

Neil Little
Neil Little
5,555 Points

You may also want to look into this:

[Compass for SASS](compass-style.org)

It has some great uses for box shadow, gradients and will soon support animation!

With reference to your import question, I would look into SMACSS it is a great way to keep your SASS / SCSS dry and keep things in modules for later modification and keeps things clear as I too came across many files in my projects:

SMACSS LINK

Hope this helps.

Neil Little
Neil Little
5,555 Points

Woops, this forum needs an edit option :)

COMPASS -> SASS

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Neil Little - Pretty sure it has an edit button, do you not see it.

Neil Little
Neil Little
5,555 Points

I must be blind, do you forum rules anywhere..

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Thanks guys, been getting into compass lately too, downloaded and installed scout. How did I do this before? This has ruined the ability for me to ever develop a site in just css again.