You are viewing our old blog site. For latest posts, please visit us at the new space. Follow our publication there to stay updated with tech articles, tutorials, events & more.

SASS: Go sassy with css

Thursday, November 27, 2014 | By
0.00 avg. rating (0% score) - 0 votes
In summers of 2014 we planned to start naukri.com revamp. It was a great chance for us to redesign and rethink our strategies.
One of the pain point was to manage CSS effectively and after few brainstorming session we thought of bringing in CSS preprocessor . Now after 6 months it looks like without SASS, CSS could have gone haywire.
Plain CSS had some issues:
  • No concept of variables.
  • Reusing a collection of rules is cumbersome.
  • Missing support to include or extend block of css.
  • Managing css into separate modules is not feasible
    • CSS @import rule prevents parallel downloading
To overcome such limitations we needed an advanced version of CSS, which is  SASS.
SASS (Syntactically Awesome Stylesheets)
Sass is a scripting language that is interpreted to CSS. It helps you write faster, more efficient, and easy to maintain CSS.
How SASS is sugar for CSS:
  • Variables support make it easier to change css across pages
    • We kept colors, fonts, dimensions & references in variable in separate files.
  • It allows modular CSS by using @import directive.
    • With Sass’s @import directive we can have as many files ( called partials in sass world)  as we want in our development environment and this will compile to a single file in production.
  • It allows nesting of css rules
    • Makes it easier to define parent-child relationship.
    • Increases readability of css.

As with using any tool for the first time, we made quite a few mistakes.  Mistakes are healthy though – you learn from them.
We prefer Koala (GUI application for real-time compilation) for SASS to CSS compilation. It  listens to sass files, compile them automatically into css files when they changes and has a great GUI.


Posted in Frontend, Web Technology
Tags: , ,