Syntactically Awesome SASS

SASS is Syntactically Awesome StyleSheets, in short a powerful CSS framework with superpowers.

Why do we need a framework for CSS?
For very large applications stylesheets can grow complex and tedious to maintain. So we have some features of SASS, that make this task of maintenance and overall build simpler with Preprocessors like variables, nesting, mixins, import etc.

SASS Speciality
Variables are used to store information which can be reused later throughout stylesheet.
Syntax is $variable-name: parameter1, parameter2;
Nesting is done with CSS selectors and is hierarchy based, as we have in html file. Nesting makes the code more readable.
Mixins are group of CSS declarations that can be reused throughout the site. To create a mixin you use the @mixin directive and give it a name. After creating your mixin, use it as a CSS declaration starting with @include followed by the name of the mixin.
Import option that lets split CSS into smaller, more maintainable portions. But for each use of @import in CSS it creates another HTTP request.
Extend/Inheritance is one of the most useful features of Sass. Using @extend lets you share a set of CSS properties from one selector to another.
Operators like +, -, *, /, and % for doing math in your CSS is very helpful. Sass has a handful of standard math operators.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s