Sass is this awesome CSS extension that offers a more productive stylesheet creation process. (Literally awesome, Sass stands for “Syntactically Awesome Stylesheets.”) Sass is relatively new, coming onto the scene in 2006, but has been growing in popularity ever since.
I’ll be honest: at the time I am writing this, I am not so familiar with Sass. But I do know that everyone who uses Sass loves it and raves about all the benefits it brings to their workflow.
To offer more information about this new CSS extension language, I asked Sass expert Julie Cameron a few questions.
What is Sass?
Essentially, Sass is a layer between the stylesheets you author and the .css files you serve to the browser.
Julie elaborates,
“CSS is a fairly simple language that can do some pretty powerful things, but it can become rather tedious to work with. As your stylesheets continue to grow – scalability and maintainability become increasingly difficult and changes often result in code bloat, specificity trouble, and even browser performance issues.”
“Enter Sass: Syntactically Awesome Stylesheets. Sass is a CSS meta-language and precompiler that makes the styling of your website a breeze by adding invaluable features of more traditional programming languages, including: nesting, variables, mixins, inheritance, and directives.”
While CSS is wonderful, it can be a pain at times when you have to go back and make little changes throughout the document.
Sass offers a solution to this designer’s dilemma: it allows you to roll shared rules into a reusable block. These rules are defined only once, but can be included where ever needed.
Why is Sass important?
As Julie mentions, Sass adds efficiency and flexibility to your workflow.
Moreover, “Sass will help you to quickly create a modular and well-organized CSS framework that is easy to adjust and add on to,” says Julie.
Sass follows the DRY principle: don’t repeat yourself. Aside from being faster to create, it’s also easier to maintain. Ultimately, it increases productivity.
Who should use it?
Julie advises,
“Those interested in getting into Sass (or any other CSS preprocessor) should have a solid foundation and understanding of CSS and the cascade. It also wouldn’t hurt to have some familiarity with CSS design concepts like OOCSS and SMACSS, but this isn’t necessary to get started.”
(OOCSS is Object-Oriented CSS and SMACSS is Scalable and Modular Architecture for CSS.)
Sass Resources for Beginners
Here is a full-blown list of Sass learning resources recommended by Julie:
- Sass-
Lang.com – The main Sass website will help you get setup and be your go to for documentation. - The Sass Way – A fantastic aggregation of Sass articles, filterable by skill level.
- Sass For Web Designers – A Book Apart’s intro to Sass – a great quick read!
- Sass in the Real World – An intermediate, 4-part book series on Sass and it’s implementation in real life projects.
- Assembling Sass – CodeSchool’s fantastic Sass course – this is how I learned it!
- SassNews Newsletter – A great weekly collection of new Sass articles, tools, and community news.
- SassConf – An all things Sass conference held annually in NYC.
- SassMeister.com – A Sass playground. This is an easy way to play around with Sass and other Sass libraries live on the web.
- Sass Style Guide – Tips on how to write good Sass.
- #teamSass Community – A collection of links to tutorials, articles, books, and all sorts of Sass goodness.
Thanks Julie!
Do you have a friend who wants to learn more about Sass? If yes, share this article with them!