Sass and CSS Preprocessors HTML5
There’s a huge buzz about CSS preprocessors today. A few years ago, the argument was about the need for them, but today, the argument is about which preprocessor is the best. Designers are no longer thinking about using Sass instead of CSS; they’re thinking about which preprocessor to choose.

Sass when introduced 5 years ago was pitched as a ‘better version’ of CSS and to justify this epithet, features such as variables, nesting, etc. were introduced. But acceptance of the pre-processor has been anything but positive.  While some think they can write their style sheets by hand, some others think that these enforce an architectural structure that’s difficult to follow. And there are others who think Sass to be the best CSS preprocessor language in web design.

Even if you aren’t fascinated about Sass, it helps to have a basic understanding about how this preprocessor works. Awareness of the basic concept of different tools is important for every web designer, even though he may not necessarily adopt them. Here’s what it’s all about;

What is Sass?

Sass or Syntactically Awesome Style Sheets are CSS pre-processors built on top of CSS to provide a better syntax. Thus, the designer gets to write better CSS, create great style sheets and even save time.

Why choose Sass?

Syntaxes are easier to read because of its rules about indentation. This is very helpful when there are different web designers working together as a team on a site. Everyone is forced to follow a set style of commenting and formatting and doesn’t allow room to deviate from the coding practice.

You don’t have to worry about missing semi colons or braces because the preprocessor ensures that they are placed correctly for every output. This helps because you don’t have to wait until the end to be told that a semi-colon is misplaced.

Setting up is easy if you have Ruby installed. You just have to download the basic file structure (this is easily available) with prewritten Sass files.

Some resources for Sass users

Framesworks, apps, plugins… there are many resources developed for Sass users.  Some of these include;

  • Foundation: Foundation is a framework built on Sass with minimalist aesthetics and great UI.
  • Bootstrap Sass: Bootstrap is set on LESS. But if you want to work on Bootstrap and Sass, use Bootstrap Sass. This rewrites the LESS components in Sass.
  • Compass: Compass is another popular framework that makes use of Sass.  It has some prebuilt mixins libraries that make the framework easy to use.
  • Bourbon:  Bourbon has simple but slightly better mixin libraries that make designers easy to use Sass. Codes within the framework can be kept clean and avoid unwanted rules to the style sheets.
  • Zen Grids: Zen is a responsive grid system with Sass as its background. It offers hundreds of layouts but doesn’t bog you down.
  • Sassy Buttons: To install Sassy Buttons you need to install Compass first as this is a Compass extension. But once installed it allows you to design super cool buttons.
  • Scout: Scout is an app that works across platforms. But they work with Sass and Compass well and make it easy for designers to optimise and organise their work flow.
  • Breakpoint: This makes it easy to write media queries. It also handles cross browser compatibility issues.
  • Codekit: This resource isn’t free, but very helpful and can be used for pretty much any pre-processor- Sass, LESS, Stylus, etc. This app compiles codes into a standard format. Not just that, it monitors the project constantly to check if any code needs to be compiled.

How does Sass Compare with LESS, SCSS and other tools?

This is a common point of debate on many forums and developers seem to be highly divided on their preferences. We compare Sass with other pre-processors to help you further;

  • Sass Vs. LESS: Sass is in Ruby and LESS is in JavaScript. Although you need to know Ruby, you needn’t be a command-line expert to understand Sass. This is the case with LESS as well. But when it comes to popularity among front end developers, they seem to prefer LESS. Sass is slowly and steadily gaining popularity among the community, but for now the scales seems to be tilted in favor of LESS. This could probably be because JavaScript is still considered very powerful and there aren’t too many limitations while using it.
  • Sass Vs. SCSS: SCSS is the 3rd version of Sass. It contains all the syntax features of CSS  , but in an expanded form .With Sass, designers have to understand a new syntax entirely, but with SCSS, it is just about introducing them to a couple of new concepts.

Misconceptions about Sass

Bloated style sheets are cited to the biggest complaint against Sass. Yes, mixins may bloat the CSS, but when they are used without arguments. There’s another misconception that Sass cannot be used in other architectural approaches. But Sass has nothing to do with the architectural approach. Sure Sass can’t solve all web design problems, but when used properly they can be of huge help to design websites. But one thing is for sure- the plain old CSS is surely becoming less popular. Just because someone has spent their life writing style sheets by hand, it does not make the designer any less efficient for choosing a powerful tool like Sass. This is a tool primarily aimed for designers and to help them create better websites.

A few reasons to pick up Sass?

Sass is easy if you know CSS. Most of the components including the syntax are the same. That’s because Sass was designed to make it easy for designers to understand and accept the tool.

Sass does not pressure you to use elements such as mixins or variables. If you don’t want to, you can always skip them. But as you proceed, you’ll find yourself increasingly drawn towards these elements- not because you have to use them, but because you’ll want to try them out.

Using normalise.css is a challenge when using CSS. You may have to either add extra HTTP Requests, or copy and paste the contents into your style sheets. Both of these are difficult and complicated. However allows you to use the @import statement to normalise CSS.

CSS is still evolving and pre-processors like Sass have a great influence on future specifications of CSS. It helps to stay ahead of the curve.

A few reasons to avoid Sass?

Sass is not for you if you aren’t familiar with CSS as these are CSS pre-processors. If you are new and only learning CSS, mixing Sass and CSS can become a messy job.
As earlier said, it’s easy to learn and adopt than other tools. But at the end of the day, it’s just a framework and everyone is free to write the way they want.