Top 5 reasons to switch to SASS.

sass

I remember there was a time when CSS didn’t exist and all HTML tags were in CAPS.  But times change for the better and CSS came and now CSS3. By separating style from form design was much easier to implement.  SASS is basically a tool that makes CSS quicker and easier to implement. I’ve been playing around with sass on websites for almost 2 years.  And here are my top 5 compelling reasons to switch to SASS.

#1 Easy to learn

Sass has an older flavor (SASS) and a newer one(SCSS)… And if you know CSS then you already know the basis of either. And standard CSS is completely compatible with the newest version. So you don’t have to learn any of the extended features of SASS to get started.  And you can add those features in as you get more comfortable.

#2 Organization

One of the most frustrating things about CSS is how big and unwieldy the files can get. Making you lose time doing a search or scrolling to find what you are looking for. Sass lets you divide up your css into separate files. And you can do that in whatever way makes sense to you. And then you import them from your style.scss file which acts like a table of contents.

For example some divisions I use are:

@import 'base';
@import 'layout';
@import 'typography';
@import 'siteidentity'

And since sass uses a preprocessor, all of these files get combined and can be minified automatically for your site. (My first preprocessor was Prepros a great program, but now I use Grunt).  Additionally since you can divide up your code, you can easily reuse parts of your code just by copying the files you want to your next project.

#3 Math

I don’t know how many times I’ve wanted to figure use math to figure out spacing in a layout. And though the CSS Calc() function is gaining traction (and is some ways more powerful) SASS does the math during preprocessing. This means the browser doesn’t have to do the math, as the answer is all that it sees.

#4 Variables

Something that the Calc() function can’t utilize yet is variables (though that is in the pipeline). How many times do you have to go searching for the hex or RGB code for your accent color? Or for that matter how hard is it to change your standard margin or padding size? Instead you can define those as variables in Sass.

$accentColor: #453093;
$margin: 1em;
$padding: .75 * $margin;

#5. Nesting

In normal css if you want to style uls only in NAVs or LIs in those ULs, you have to do something like this:

nav{
  nav styles
}
nav ul{
  ul styles
}
nav ul li{
  li styles
}

but with nesting you can do:

nav{
  nav styles
  ul{
    ul styles
    li{
      li styles
    }
  }
}

This visual and structural hierarchy makes it a lot easier to manage specificity. And it also makes it easy to see what styles are going to be inherited.

Bonus: Mixins

Mixins are a more advanced topic. Mixins let you save time by doing things that need to be done. (Most of them you have to create yourself or get from a package like Compass)

For example:

@include border-radius(10px);

instead of :

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;

Are you sold? Then visit http://sass-lang.com/ to learn more. And prepros is a great free preprocessor at https://prepros.io/ (advanced features cost $29, but you dont need them to get started).

Do you use SASS or LESS? What are some strengths and weaknesses you see in using such tools?

Comments

One response to “Top 5 reasons to switch to SASS.”

Leave a Reply

Your email address will not be published. Required fields are marked *