Posted on by & filed under Content - Highlights and Reviews, Programming & Development, Web Development.

SassAs web applications continue to increase in complexity, new tools have emerged that can help developers better manage their code. With JavaScript libraries, powerful server-side frameworks, templating engines and even entirely new languages, the landscape of web development is at an exciting stage. In this article, we will introduce a tool called Sass, or Syntactically Awesome Stylesheets, which helps make the writing and maintaining of Cascading Stylesheets (CSS) for web developers a breeze.

In essence, Sass extends CSS with new syntax for concepts like variables, nesting, mixins and inheritance. This extended syntax is then compiled into vanilla CSS by the Sass compiler so that it can be readily used in a browser. To install the Sass compiler, make sure you have Ruby installed on your system. Then run the following:

This installs the Sass gem that comes with the compiler bundled in it. Let’s see how Sass helps you write clean and elegant CSS by studying a few of its features using examples. You might also want to look at Chapter 1. Instant SASS CSS How-to in Instant SASS CSS How-to to learn more about Sass.

Variables

Sass allows variables to be declared, which can contain values to be used anywhere in the stylesheet. This allows values to be defined once and used multiple times, and if that value changes, all styles where the variable has been used are updated. For example:

The resulting CSS file is:

Nesting

Nesting allows long CSS selectors to be avoided, and instead styles that are conceptually “nested” under a style can be syntactically expressed as such. This is a powerful concept that does not only result in elegant syntax, but also enables the structure of the code to be understood more easily:

This will be compiled to:

Mixins

Another very powerful concept offered by Sass is that of mixins. With variables you just have values that can be reused, but mixins allow whole chunks of code to be used multiple times. This allows the commonality and interdependencies between styles to be expressed and managed very elegantly. The following is an example that uses the concept of mixins:

The compiled CSS is:

Conclusion

These are just a few of the features that Sass offers and there’s a plethora of other great features that you can use as well. For more information about Sass, head over to the Sass web site.

Safari Books Online has the content you need

Check out these SASS books available from Safari Books Online:

Instant SASS CSS How-to is a practical, hands-on guide that provides you with a number of clear step-by-step exercises, which will help you take advantage of the power of SASS, and give you a good grounding in writing and compiling CSS style sheets using the SASS pre-processor language. This book looks at how you can incorporate SASS into your web pages, and either produce style sheets dynamically, or pre-compile them before including the final article into your site’s pages.
Targeted at high traffic websites—-those receiving over 10,000 unique visitors a day—-Pro CSS for High Traffic Websites gives you inside information from the professionals on how to get the most out of your web development team.

About the author

Shaneeb Kamran is a Computer Engineer from one of the leading universities of Pakistan. His programming journey started at the age of 12 and ever since he has dabbled himself in every new and shiny software technology he could get his hands on. He is currently involved in a startup that is working on cloud computing products.

Tags: CSS, mixins, Nesting, Sass, Syntactically Awesome Stylesheets, variables,

Comments are closed.