Switching from CSS to Sass

Recently, I've been working on a variety of different web app projects. The velocity at which I can get a basic prototype up and running has been increasing, but it was still a pain in the ass to quickly get things styled the way I wanted with CSS. In comes Sass. The inclusion of Sass into my process has significantly increased the speed at which I can get to decent UIs. I've included it into my Flask boilerplate that I use to scaffold basic web apps. Some of the pros and cons:

Pros

  • It's not a framework! It's basically just CSS, with a few extra things sprinkled in.
  • I can think like a developer while I design by using the nesting, variables, and mixin capabilities. It is simply more logical and a giant, non-nested blob of CSS.
  • Automatically generates a master CSS file anytime I make a change to a Sass file. The HTML links to the generated CSS file, so I don't need to add any complexity to my build and deploy process as long as I'm always using sass --watch while developing locally.
  • Almost syntactically identical to Python, which is what I spend most of my time in.
  • Solid community around it. There are lots of handy mixins you can find just by googling around, such as these ones.

Cons

  • Needed to learn a few new things.
  • In certain cases it can be harder to debug with the basic browser developer tools.
  • Never have used it in a project where multiple other designers were also building the front-end, but I'm assuming it's best if everyone uses Sass. It can be hard to follow the sass-outputted CSS and then collaborate on top of it.

Overall it's the most useful thing I've picked up in a while. There are some great resources out there. I've listed some of the ones I have used.

Resources