The best part of web designing is editing CSS. Cascade Style Sheets otherwise known as CSS is used to give the look that every website has. As you dive into the depth of designing complex web pages, you sometimes require CSS syntax that needs to be written again and again, same as the case for code re-usability, which is done by functions. But there is no thing as functions in CSS, so to rescue web developers a team of developers has introduced SASS, Syntactically Awesome Style Sheets. SASS makes the CSS coding even more fun. Adding more to its value SASS comes with the famous frameworks like Compass, Bourbon and Susy. The common features that SASS comes up with to support CSS are as follows

  • Variables
  • Nesting
  • Mixins
  • Inheritance

Varibles Varibles are the primary blocks of any language. But unfortunately there was no concept of using variables in CSS until SASS introduced it. SASS allows its users to use variables which can store colors, fonts and any other reusable value.

SASS Variable

When SASS is processed we define $font-stack and $primary-color and out output the CSS.  This comes really handy when it comes to usability and to maintain the consistency throughout the site.

SASS Variable 2

Nesting CSS doesn’t allow nesting, but with the integration of SASS the concept of nesting. Here’s a screenshot for SASS and CSS code.
SASS Nesting


The CSS generated code would be

SASS Nesting 2
Imports HTTP requests are a big problem during the imports in CSS. SASS makes it possible for CSS without http requests so you can serve your single CSS file to the web browser.

Mixin A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. A good use of mixin is for vendor prefixes.

Inheritance By using the directive @extend you can use the inheritance in your CSS files. So you don’t have to recall same properties of a class for every other class. You just type the name of the class with a prefix of a “@extend” directive.

Operators This is simple and easy to understand, you can now use arithmetic operators. For making pages fluid and responsive the percentage values are used instead of just the fix pixel values and SASS does this for CSS.

For more information visit: SASS Website or visit SASS Course Online