SASS (Syntactically Awesome Stylesheets) is an efficient modular way of writing CSS. It is Powerful and most stable css preprocessor, around us for almost 7 years. There are n-number of frameworks built with Sass. Compass, Susy, Gumby and Bourbon just a few name.

Beauty of the SASS a CSS preprocessor

Writing a vanilla CSS is really very interesting, but when it gets larger, it becomes more complex and harder to maintain. SASS has many feathers on its head that describe its beauty. Variables, Nesting, Partials, Import, Mixins, Inheritance and operators

Mixins should to be used carefully

Mixin is a cool feature of SASS that make CSS code re-usable and maintainable, but it brings code redundancy, It may bloat CSS by repeating the code. Consider the below example

This is obviously not an ideal way of writing CSS. Good organization of SCSS and smart use of its features is required to make it actually beautiful.

Placeholder will not appear in CSS output unless we @extend them.

Placeholder in place of mixins

In the above scenario, mixin spreading unnecessary dust. Placeholder will make more sense here. See the same code with placeholder below.

Efficient use of mixins

That doesn’t mean mixin is useless, mixin is great but it need to be used smartly, considering the above scenario placeholder make sense but when a return value dependent on an argument passed to it. It will generate different output with every use. Mixin for border is a good example.