7 Reasons to Use Sass

reasons-to-use-sass

If you're not already on the Sass bandwagon, here's seven reasons to help you make the transition.

Partial Files

Really long CSS files are painful. Before Sass, I used to try to devise ways to make it easier to jump around a CSS file, and I even used @import to pull in other CSS files, which is a performance no-no. Undoubtedly, the first feature of Sass to make my life easier is the use of partial files. By simply prepending a file name with an underscore, eg: _header.scss, and referencing the partial in your primary scss file, Sass will compile it into the primary css file without compiling it to an individual CSS file.

Now we can break down our CSS into focused files to simplify code management with the comfort of knowing it will all compile into a single CSS file for the browser.

// the following partials will compile into one CSS file
@import 'globals';
@import 'type';
@import 'images';
@import 'header';
@import 'nav';
@import 'page';
@import 'footer';

Nesting

If we're not careful, CSS can easily get out of hand with long selectors, especially when targeting multiple elements or classes inside a parent element. Sass allows us to nest selectors inside others, much like the nested structure of HTML, to make our code more readable and easier to maintain.

.parent {
  display: block;

  .child {
    color: #fff;
  }
}

Nesting vastly simplifies writing pseudo selectors by using the & character to concatenate parent and pseudo selector, like:

a {
  color: #369;
  text-decoration: none;

  &:hover {
    color: #666; 
    text-decoration: underline;
  }

  &:active {
    outline: 0;
  }
}

Nested Media Queries

Similarly, the management of rules targeted by media queries is vastly simplified with use of nested media queries. Once upon a time, I would have all the media queries one of more partial files, which invited the opportunity for human error.

Now we can drop in our responsive styles right where it makes most sense, like this:

.box {
  width: 33%;

  @media screen and (max-width: 600px) {
    width: 100%;
  }
}

Variables

The most obvious use of variables in Sass is for color management. By using $light-blue in our code, which references a predefined value like $light-blue: #176BEC;, it allows us to fine tune the color palette without needing to reach for the find & replace command.

Variables become exponentially more useful when combined with other Sass functions like lighten($light-blue, 10%) or math functions applied to numeric variables; for example calculating a ratio: percentage($width/$height);

Minification

When it's time for pushing our CSS to a production site, Sass will minify the code with a simple config option, removing all comments and whitespace. Now there's no excuse for having multiple bloated CSS files on a website, we combine all the partials into a single, minified CSS file.

The Bourbon Mixin Library

Mixins are awesome, but I'm going to skip right over the part about writing your own custom mixins and say that what is way more excellent is an extensive collection of mixins created by people much smarter than me.

Bourbon is wonderful Sass mixin library which I use on every project. Since Sass only compiles what I use, there is no performance concern about including a library of code that I may or may not use, unlike jQuery for example. Bourbon takes all the pain out of writing vendor prefixed code, such as a keyframe animation like:

@include keyframes(slideOpen) {
  from {
    @include transform(translateX(0));
  }
  to {
    @include transform(translateX(240px));
  }
}

The Bourbon docs are excellent, so take a look at all the other handy shortcuts it has to offer.

Bootstrap Sass

I couldn't write an article about CSS without mentioning Bootstrap. Although it is originally written in LESS, there are many ports of Bootstrap into Sass, such this one. Much like Bourbon, we can include the Sass version of Bootstrap in our project to make all the mixins and partial files available. Rarely is there a need to use the entire Bootstrap framework, so instead we can call upon just the components we want to use, for example we can use just the typography and button styles like so:

@import 'bootstrap/variables';
@import 'bootstrap/mixins';
@import 'bootstrap/type';
@import 'bootstrap/buttons';

Alternatively, we can use the @extend directive to use Bootstrap styles with our own selectors, like:

.custom-button {
  @extend .btn;
  border-radius: 0;
  border-width: 0 0 3px 0;
}

3 Responses to “7 Reasons to Use Sass”

  1. Joe says:

    You make CSS sound so fun! thanks

  2. Brandon says:

    Is SASS better than LESS? or are they pretty much the same?

Leave a Comment