Navigation

5 reasons you should be using Sass today

By David Conner | CSS | Aug 4, 2014

By now I’m sure you’ve heard of Sass and how “You really need to start using it!”

Learning a new tool can suck and finding the time to do so is next to impossible but sometimes a tool comes along that changes our industry and is too good to ignore.

As our web pages and apps get more complex our style sheets get larger and harder to maintain. CSS preprocessors like Sass help by keeping our style sheets concise and allowing us to modularize our code while offering a whole slew of features not yet available in regular CSS.

These extra features also make them really fun to use! Now you may have seen something that looks like this:

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

// http://sass-lang.com/documentation/file.SASS_REFERENCE.html#_11 

and thought, “Whatttttttttttt? Thanks but I’ll keep my regular ol’ CSS.”

I admit, it looks daunting and some people are doing some really crazy, complex stuff with Sass but I’m here to tell you that anyone can start using it and the gains you get on day one will make you a Sass believer.

Getting Sass set up for a project is a little beyond the scope of this article but installation is relatively easy and the Sass website has instructions for Linux, Mac or PC. The cool thing is, once it’s installed, you can take any CSS file you have and rename it .scss making it it a Sass file.

All properly formatted CSS is valid Sass!

This means you can start using Sass while continuing to write your styles as you always have, slowly incorporating more features as your comfort level grows. That’s right folks, just the same ol’. same ol’ but here are five awesome gains you now have at your disposal:

 

1. Variables

What is that main header color again? How do I write that font-stack? How many times have you been writing CSS and had to search through your previous styles for a value or had to break out the color dropper, yet again, to find out that hexadecimal color?

Sass provides variables as a way to store information that you want to reuse throughout your style sheet. Now you can store that color value or long font stack as something easy to remember. The way you declare a variable is with a dollar sign $ followed by the name. This name can be whatever you want it to be. Then you type a colon : followed by the value and a semi-colon ;:

$mainFont: "Helvetica Neue", Arial, sans-serif;
$mainColor: #CC6699;

Now if you want to use one of these values you can just use the variable instead.

.mySelector { font-family: $mainFont; color: $mainColor; }

Awesome, right? This one feature alone, makes it worth the install as it saves so much time when authoring CSS. It’s so great that it will probably make its way into the CSS spec but who knows when we will be able to use it? Lucky for us, with Sass, we don’t have to wait.

 

2. @import

Now you might be saying to yourself “CSS has @import, it’s not that cool” and you would be right but the CSS and Sass versions differ in a significant way. In normal CSS @import pulls in other style sheets but it does this by making another HTTP request, something we usually want to avoid. For this reason you may not have even used @import before. Sass, on the other hand, is a preprocessor (emphasis on the pre) that will pull in that file before it compiles the CSS.

The result is one CSS page that is handled by one HTTP request. What this means is that you can break up your css into smaller, more maintainable chunks while still only serving one page to the browser. Need to fix the text on the button? No more skimming style sheets looking for the pertinent button styles. Just open up your button partial and make the changes.

What’s a partial? Just what they sound like. They are partial Sass files that contain little snippets of CSS that you can include in other Sass files. They are named by using a leading underscore followed by a name. _myFile.scss. The underscore lets Sass know that the file is only a partial file and that it should not be compiled into CSS. To import this partial you just have to add the @import to your file like so:

@import 'partials/myPartial';

So I am importing _myPartial.scss that is located in a folder named partials. You do not have to include the underscore or the file extension. Sass is smart enough to know which file you mean. The use of partials allows us a great way to modularize our code, making it more portable and easier to maintain.

 

3. Color functions

Sass brings functions along to the CSS party. I know not everyone is a programmer and the concept of a function may be a tad over your head but don’t worry, many add a ton of useful features while not being overly complicated. As far as colors, there are a several useful ones to manipulate them but three stand out as awesome, easy gains for people just getting started. Let’s look at how we use them.

//syntax lighten($color, $amount) darken($color, $amount) rgba($color, $alpha)

The syntax is pretty straight forward. In the three functions above you see we have two arguments for each. The first is the color we want to manipulate. This can be a hexadecimal, RGB or any color format that is proper CSS. It can even be a variable. The second is the amount we want to modify that color by. Make 10% darker, Lighten by 5%, Set the alpha to 0.6. The result of this function is the value that is set in the compiled CSS. So down below you see our functions at work

//in parenthesis you can put any color value followed by the amount you want to modify it by.
//lighten(#000, 10%)
//darken(rgb(0,0,0), 25%)
//rgba(blue, 0.6)
//rgba($mainColor, 0.6)
//use case
$color: #333;//set color variable
.myButton {
 background-color: rgba($color, 0.8);
 color: lighten($color, 65%);
 border: 1px solid darken($color, 5%);
}
//this compiles to:
.myButton {
 background: rgba(51, 51, 51, 0.8);
 color: #d9d9d9;
 border: 1px solid #262626;
}

Hopefully you can already see how this could be useful. There are a dozen ways to utilize these three functions to add some pretty cool color contrast and they can be used anywhere a color value would normally go. These three are just the tip of the iceberg. There are plenty more color functions and many creativ ways they can be used.

 

4. Mixins

Some things in CSS are a bit tedious to write. Mixins make groups of CSS declarations that we can reuse throughout our site. CSS3 styles that require vendor prefixes are a perfect example of when to use a mixin. Instead of typing the same property over and over we write a mixin once then call that mixin anytime we want to use it. To declare a mixin we use the @mixin keyword. We then give it a name and apply our styles in between curly braces like so:
@mixin box-sizing { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
Arguments can even be passed to the mixin to make it more flexible. To use our mixin we just use the @include keyword.

//declare mixin(now being passed an argument)
@mixin box-sizing($boxSize) {
  -webkit-box-sizing: $boxSize; 
     -moz-box-sizing: $boxSize; 
          box-sizing: $boxSize;
}

//use mixin
.mySelector {
    @include box-sizing(border-box);
}


//compiled to:
.mySelector {
    -webkit-box-sizing: border-box; 
       -moz-box-sizing: border-box; 
            box-sizing: border-box;
}

As you see in the example above we call our mixin with the @include followed by the name of the mixin then any arguments inside parenthesis. Think of how much time this will save you. Why isn’t everybody using this?

 

5. @extend

These tools been great but I’ve saved the best for last. @extend is one of the most useful features that allows us to share a set of CSS properties from one selector to another. Think of a pair of buttons, like an accept and decline button on a modal window. Since they are both buttons they’ll probably share most of the same styling but the decline button will have a red background to make it stand out. With Sass we write the default styles for all buttons then “extend” these styles to the decline button where we would add the red background.

.button {
 background: rgba($color, .8);
 color: lighten($color, 65%);
 border: 1px solid darken($color, 5%);
 padding: 1em;
 display: block;
 max-width: 200px;
}
.button-decline {
 @extend .button;
 background: red;
}
//compiles to
.button, .button-decline {
 background: rgba(51, 51, 51, 0.8);
 color: #d9d9d9;
 border: 1px solid #262626;
 padding: 1em;
 display: block;
 max-width: 200px;
}
.button-decline {
 background: red;
}

Man, how awesome is it to not have to repeat yourself? Not only does this promote modularization of our styles but it reduces the risk of styles being off from button to button. This is a huge time save win! Multiply this for all of the styles of the site and we have a significantly reduced time frame for writing CSS.

Heck, with all the time we are saving maybe we could learn the more complex aspects of Sass.

 

Summation and further reading

I hope I have convinced you to give this amazing tool a shot and illustrated some features that could improve your productivity right away. The truth is I could write this article again tomorrow and have five more really neat features to share. It’s just that awesome! Sass (and other preprocessors) are here to stay so do yourself a favor and start using it. For those interested in finding out more check out these resources on twitter and the Web:

Twits:

Webs:

And if you’re in the South Florida Tri-county area come join us at the South Florida Sass Meetup.

Share this post
Comments (no login required)
  • http://www.kreditcredit.ch Marko

    Great! I use this “Color functions”.

  • Luke Pettway

    I’m so glad that I started using Compass. Having variables really helps, and I love being able to edit smaller files instead of one big CSS file. The best part is that you can start with SCSS instead of using a SASS file and use normal CSS in it until you get used to all the extras that SASS has to offer.

    • Davidicus

      It is a great feature. It lowers the bar of entry and allows novices to get their feet wet.

  • http://juliosalvat.com/ Julio Salvat

    Great article! We need to continue to help others that are looking for solutions. What good is this knowledge unless we share it?

  • http://www.martinspierings.nl Martin Spierings

    nice article. Found out most of em myself (not really using the @extend feature as i’m not often repeating myself).
    One thing to note is that you can also generate a mapping file for the css you generate. So when inspecting in chrome you see the css rules refer to the actual sass file, not the css file that sass compiled.

    And you can also enable minify and comments removal in the file you generate so its even smaller and faster.

  • http://jakartawebdeveloper.tumblr.com/ Jakarta Web Developer

    Great article, thanks for sharing

  • Tim

    I think both SASS and LESS will be abandoned in the future when regular old CSS gets updated with its own system for variables and other things. But, they’re ok for now. I personally find it more useful to keep my CSS in one big file that is well organized.

    • http://nandovieira.com.br Nando Vieira

      But there is more than just variables. Mixins and placeholders are so useful to reduce duplication across your project. Also having some imperative programming features like looping is awesome.

      • Tim

        That’s why I said “variables and other things.” ;)
        That aside, I rarely duplicate any CSS styles when I develop a website.

  • Chris

    Started using Sass and fell in love.

  • Igor Leahu

    I start using SCSS, and it’s amazing… and also clean :)

  • imran ali

    You have summed up a whole book (I read in the previous month), in a 10 minutes read, good job.

    • Davidicus

      That is a huge compliment. Glad you liked the article. Check out some of the resources listed. They are really great.

  • http://danicfilip.com DanicFilip

    I started using SASS because of the Zurb Foundation framework – it’s truly made the development cycle easier and more enjoyable!

  • Davidicus

    I agree. All pre-processors are awesome. I just happen to be familiar with and love Sass.

  • http://theusfalcao.com Theus

    I prefer LESS :/

    • Davidicus

      All preprocessors are great.

      • http://theusfalcao.com Theus

        I agree. But I think the simplest LESS than the SASS, which does not take its functionality. Got the best reading their docs LESS than the SASS.

  • Davidicus

    I wanted to point out that there are many more great resources out there. Codepen.io was huge in getting me into Sass. You dont have to set up the environment and you can easily practice new features. Also, everyone should sign up for the Sass newsletter. Always putting great stuff in there from around the web. http://sassnews.us7.list-manage.com/subscribe?u=b4a4054cce715a3b0ae5e7d35&id=f7c505323d

  • Taria

    Thanks so much for this article – the first one about SASS that has really helped me understand what it is and can achieve (although I understand that what you mention in the article is just a tiny part of what can be achieved). Everything I have read thus far has gone a little over my head so I wanted to thank you.

    • Davidicus

      That is exactly what I was going for. Thanks for the great compliment! You made my day!

  • HemanthMalli

    using sass is a good opinion in web designing any type of file can be uploaded.

  • http://www.proweb365.com/ Minneapolis Web Design

    “Which CSS preprocessor language should I choose?” is a hot topic lately. yarh! Sass is better on a whole bunch of different fronts, but if you are already happy in LESS, that’s cool, at least you are doing yourself a favor by preprocessing.

  • Rapid Code

    To the author’s great surprise I can do all those thing with PHP/JS/C# using my own dam variables and methods.

    Or I can use standard CSS and a mediocre amount of typing skills.

    Pre-processors for CSS are as useful as a nail in the anus. They take time to learn , they spew bad code that’s hard to review by a third party and they pointlessly increase code length and file size.

    • Davidicus

      Preprocessor only “spew” the code you write in them but by all means don’t use a tool that doesn’t work for you.

  • http://macherry.org/ Lena

    This is nice, but to be real.. I don’t even know how to start. I’ve installed sass here on my computer, but didn’t find any tutorial for newbies like me xD

    • Davidicus

      The best part of using the scss syntax is regular css is valid sass! So just write code the way you would normally and begin incorporating more sass features as you get comfortable with them. Variables is something you can use right away. Store color codes, font stacks, etc. I would be more than happy to answer any questions you have on some of the techniques in this article. Hit me up on twitter @dave-conner. Also check out https://twitter.com/TheSassWay. pretty great blog that has different level articles. So you can read about beginner stuff and work your way up. Hope this helps! :)