Make your CSS more Powerful with Sass

Writing CSS can be a timely task and there is often quite a lot of repetition and redundancy in style sheets, especially those in larger websites. If only there was a way to write CSS in a more powerful and structured way, there is and it’s called Sass.

Sass is basically a language that’s placed on top of CSS that’s used to define styles in a more structured and powerful way than normal CSS allows. It’s a simpler, more elegant language than CSS and it has quite a few interesting features that allow you to manage your style sheet more easily. The way it works is pretty simple, you write your Sass code then translate it automatically into flat CSS using a command line tool.

The main features Sass offers include nested rules (you can avoid repetition by nesting selectors within one another), variables (you can define variables to re-use), mixins (re-use whole chunks of CSS) and selector inheritance (one selector can inherit all the styles of another without any duplication).

It’s quite an interesting concept which could come in handy for larger website projects. Have a play and let me know what you think.
sass variables

Adham Dannaway

Web Designer and Front End Developer with a passion for web design, coding, blogging, WordPress and chewing gum. Check out my web design portfolio and follow me on Twitter and Facebook!

Share this post!

Tags: , , ,

  • Share
  • Stumbleupon Cre8ive Commando
    • Share

  1. Nugraha on July 29, 2011

    browser compatibility?

  2. Praharsh on August 1, 2011

    Nice article… Wanna learn more about it..

Trackbacks


Have your say!