Getting Started with Sass

by David Demaree

24 Reader Comments

Back to the Article
  1. Excellent thing, minus only that it will be necessary for a long time to adapt, in order to freely practice to write code in Sass, even for the skilled web designer.
    But judging from the article — Sass is a worthy replacement of CSS in web design, the future of this technology exists.
    Easier syntax, logical structure and the possibility of using variables provides an excellent opportunity for developers and can significantly speed up the writing and editing CSS files.

    Copy & paste the code below to embed this comment.
  2. Good to see this topic tackled by ALA. I think of the two I prefer the Less syntax, but CSS preprocessing is definitely catching on either way.

    Two things I notice: I don’t think the @import syntax is new—when you reference local stylesheets you don’t need to use “url()” even in regular CSS.

    When you describe the clearfix mixin, you include it later as “clearFloats”—might confuse some people so I thought I’d point it out.

    Thanks for writing!

    Copy & paste the code below to embed this comment.
  3. I am so happy to finally see a Sass article on ALA! It adds incredible control over stylesheets that just can’t be done with regular CSS.

    Lately I have been enjoying building advanced tools with Sass and have found it to be far more extensible than anything else. The convenience of not having to use an external calculator, color schemer, modular scale, you name it is invaluable. Not to mention the robust frameworking capabilities Sass provides that allow the logic of styles to work beyond predefined values.

    Great article! Thanks for writing.

    Copy & paste the code below to embed this comment.
  4. Thanks for commenting! The clearFloats thing is definitely a mistake; we’ll fix it.

    As for import@, I just tested a import statement without url-less in plain CSS (in Safari 5.1) and you’re right: url is no longer required. Good to know, though I’m interested to know what browsers support this form of the import syntax. One advantage to the classic import url@ is that I know it’ll work everywhere.

    Sass always prefers to use url for external CSS files. The main difference between url and no-@url@ in Sass is that the preprocessor will check the ones with no url to see if they might be Sass partials, whereas urls are always assumed to be external. (They’re also always assumed to be correct syntax—you don’t need quotation marks inside your urls in CSS, so Sass doesn’t include them, but if you include them yourself Sass doesn’t take them out.)

    Copy & paste the code below to embed this comment.
  5. I’ve really taken to the idea of Sass and Compass and think they will make a huge difference. One cool thing I didn’t see mentioned is the ability to put robust comments in your .scss and strip them out for production stylesheets.

    Looks like the CMS has expanded the ampersand for referencing the parent. Looking at Sass’s documentation, I see the syntax as “&:property” not “&:property”

    Copy & paste the code below to embed this comment.
  6. Looks like the CMS has expanded the ampersand for referencing the parent. Looking at Sass’s documentation, I see the syntax as “&:property” not “&:property”

    Fixed this morning. Thanks!

    Copy & paste the code below to embed this comment.
  7. Yeah, just like the Fleetwood Mac song, since switching to a stack for rapid prototyping (StaticMatic, MiddleMan, etc) using Haml, Sass, and Compass – I really can’t imagine ever going back to the old method of building for the web.

    Recently collected som resources for anyone interested in getting started:
    http://do-internets.posterous.com/rapid-prototyping-with-hamlsass-compass-stati

    Cheers.
    -a2h

    Copy & paste the code below to embed this comment.
  8. I loved reading this post, it conveys the essence of Sass quickly and I must admit, I am very tempted to pick up this technology.  When it comes to CSS, even something simple like CSEdit is so welcome because we NEED ways to manage CSS.  It looks to me like Sass may be the way forward, or as Pat Metheny might say, “The Way Up”.

    Copy & paste the code below to embed this comment.
  9. My main stumbling block with SCSS is that I need to check all SCSS and compiled CSS into version control and ensure all developers (including server-side developers who want to make a quick change) whether freelance, internal or external, use SCSS and have Ruby or Scout installed to compile. Otherwise, merging their changes back into the original SCSS is a nightmare.

    My other option is to combine and minify all CSS and JS server-side on deployment, which is much simpler and still allows for multiple stylesheets and comment stripping.

    Copy & paste the code below to embed this comment.
  10. When you start to use Sass and Coffee Script You wouldn’t go back

    Copy & paste the code below to embed this comment.
  11. As with all new technologies, there some caveats with SCSS that can require work-arounds. This largely depends on the environment that you are working in and how your directories are structured (eg Ruby scaffold). While this article provides a good introduction to SASS, it would be nice to have a follow-up article describing some it’s technical limitations.

    Copy & paste the code below to embed this comment.
  12. I see clearly the advantages, but I’m reluctant to make the leap. In the case of JQuery, Javascript’s de-facto-but-still-closed standard, there is at least the justification that browsers interpret Javascript quirkily (I see JQuery as a browser-standardization layer). That’s not the case with CSS. I think the real problem with CSS is that developers underestimate it and get frustrated too quickly. CSS is all about organization rather than rules. For example, if you’re willing to use multiple classes there is no reason for lots of repetition in the style sheet.

    Copy & paste the code below to embed this comment.
  13. Does SASS have any advantages over LESS (or vice versa)? I see both mentioned quite a lot but I’m not too sure which is best to use.

    Copy & paste the code below to embed this comment.
  14. To me this seems to be another unnecessary layer to accommodate poorly structured markup. Surely its better to learn how to do something right than introduce a blanket to smother your mistakes.

    I agree that Viortol’s comments on JQuery. JQuery brings something to the party (browser standardisation for one thing) whereas SASS just masks bad structure.

    Copy & paste the code below to embed this comment.
  15. Great article and very informative.  I wasnt crazy about it at first but after reading the diffrence, I migt just utilize it.  Keep up the good work, cheers mate !

    Tre

    Copy & paste the code below to embed this comment.
  16. The right thing I am looking for, something rule about @include and nesting for me is quite usefull. TKS.

    Copy & paste the code below to embed this comment.
  17. I was very encouraged to find this site. I wanted to thank you for this special read. I definitely savored every little bit of it.
    <ahref=”http://www.travelbirdcars.co.uk/ealing”> Ealing Taxi</a>

    Copy & paste the code below to embed this comment.
  18. Just learning LESS and similar other tools that save time writing full length CSS. Nice article.

    Copy & paste the code below to embed this comment.
  19. i really dont get sass,, it can be just me but sass is one of those things which you read only for information but the truth is you dont really use them in your daily routine..
    its just making your are changing the face of our beloved CSS. it can help you for very big apps, but common for a small size website you just write 100 lines of css and taht will do you.
    But again its just me thinking dumb.. :)

    Copy & paste the code below to embed this comment.
  20. Thanks for the great article. I wanted to give you a heads up, and maybe it’s changed since the article was written that the quotes around your HEX values are outputting as well.

    From your example:

    $typekit-green: “#99cc00”;
    $typekit-link-color: $typekit-green;
    a { color: $typekit-link-color; }

    Looks like:

    a { color: “#99cc00”; }

    Which is throwing errors in webkit. (Have not tested other browsers).

    Copy & paste the code below to embed this comment.
  21. People should never forget that while using a pre-processor is great and can (will) save you a lot of time, it will only be as useful as your level of pure CSS knowledge.

    I’ve seen people replicating the whole DOM tree in SASS and while it reads very easily, it gives a horrible, specific and slow selector output.

    My advice would be to dive really deep into CSS, get your hands dirty, make a lot of mistakes and when you’re REALLY comfortable with it: use a pre-processor of your liking!

    Copy & paste the code below to embed this comment.
  22. After initially dabbling with LESS I quickly moved to SASS and have now been using it for a while and would never look back! A colleague asked me to explain how it works earlier, this article swiftly clarified things!

    Copy & paste the code below to embed this comment.
  23. In your example you use this code.

    .container {
      width: 940px;
      @media screen and (max-width:940px) {
      width: auto;
      }
    }

    Why not just use the max-width property here? No SCSS needed for this. Don’t over complicate things.

    .container {
      max-width: 940px;
    }

    Or is there a difference I haven’t seen?

    Copy & paste the code below to embed this comment.
  24. This is awesome! I’ve really been meaning to be able to learn how to organize my CSS and manage it better, and have wanted to start with a preprocessor… It looks like SASS will be it! Thank you David!

    Copy & paste the code below to embed this comment.