Intro to SCSS – Your style-sheet on Steroids

Assuming you haven’t been living under a rock or playing Angry Birds all day, there is a good chance that you’ve heard about SCSS (Sassy CSS). In a nutshell, SCSS extends the functionality of CSS with features that CSS should have had in the first place.

Why SCSS?

The real question would be, why not? As you’ll see later in the article, SCSS lets you write manageable, less-repetitive style-sheets making it really easy to read & modify your code (We all know how CSS for huge websites can potentially get messy; especially if features to such a website are added in piece-meal). This can be really helpful in companies where more than one front-end developer/designer modify the website’s style-sheet. The use of variables, mixins & other features of SCSS would encourage the front-end team to follow a specific set of standards when writing their style-sheet.

CSS on steriods

Since SCSS is an extension of CSS with some cool features thrown in, your valid CSS file is also a valid SCSS file. These features include variables, mixins, nesting & selector inheritance. You basically write your style properties in a .scss file & SCSS will compile it to a valid CSS. Let’s take a quick look at some of these features :

1. Variables

I bet that in your CSS you must be using the same color value in more places than one (eg. your website’s brand color or secondary color) or the same font-family. You can create variables to store values that you’d normally repeat in your CSS file. Hence, modifying the value of a variable in one place will update that value throughout the file wherever that variable is called. You can define variables like this :

$primaryColor: #80c040;
$defaultFont: Helvetica, Arial, sans-serif;
#header h2 {
     font-family: $defaultFont;
     font-size: 24px;
     color: $primaryColor;
}

SCSS would compile this to:

#header h2 {
     font-family: Helvetica, Arial, sans-serif;
     font-size: 24px;
     color: #80c040; }

2. Mixins

Unlike Variables, Mixins allow you to re-use blocks of code including CSS properties & selectors. For example, take a block of code that defines CSS transitions.

a {
     color: #80c040;
     -webkit-transition: all 0.25s ease-in-out;
     -moz-transition: all 0.25s ease-in-out;
     -o-transition: all 0.25s ease-in-out;
     -ms-transition: all 0.25s ease-in-out;
     transition: all 0.25s ease-in-out;
}
a:hover {
     color: #000;}
.button {
     background: #80c040;
     color: #fff;
     -webkit-transition: all 0.25s ease-in-out;
     -moz-transition: all 0.25s ease-in-out;
     -o-transition: all 0.25s ease-in-out;
     -ms-transition: all 0.25s ease-in-out;
     transition: all 0.25s ease-in-out;}
.button:hover {
     background: #000;
}

Here you’re defining all the vendor prefixes to achieve a fade effect when a user hovers over a link. This can’t be the only place you’ll define these properties though. You might want the same effect when a user, say, hovers over a button or some list elements, etc. For one, it’s a chore to type that all in & copy-pasting doesn’t simplify the matters either. That’s where mixins come in handy. You can re-write the above code in SCSS as such:

@mixin transition {
      -webkit-transition: all 0.25s ease-in-out;
      -moz-transition: all 0.25s ease-in-out;
      -o-transition: all 0.25s ease-in-out;
      -ms-transition: all 0.25s ease-in-out;
      transition: all 0.25s ease-in-out;
}
a {
     color: #80c040;
     @include transition;
}
a:hover {  color: #000; } .button {
     background: #80c040;
     color: #fff;
     @include transition;
}
.button:hover {
     background: #000;
}

To define a mixin, you use @mixin then type in a name for it (transition in this case). Then where-ever you want to put in this block of code, just type in @include mixin-name (transition, in this example) & you’re set! Neat, right?

3. Nesting

SCSS allows you to nest CSS blocks within each other. Really useful for readability & finding the link of the child element to it’s parent. For example:

a {
      color: $primaryColor;
      @include transition;
      font: {
          family: Helvetica, Arial, sans-serif;
          size: 14px;}
      text-decoration: none;
          &:hover {
                 text-decoration: underline; }}

This would compile to :

a {
     color: #80c040;
     -moz-transition: all 0.25s ease-in-out;
     -o-transition: all 0.25s ease-in-out;
     -ms-transition: all 0.25s ease-in-out;
     transition: all 0.25s ease-in-out;
     font-family : Helvetica, Arial, sans-serif;
     font-size: 14px;
     text-decoration : none;
}
a:hover {
     text-decoration: underline;
}

Not bad, eh?

4. Selector Inheritance

SCSS also allows selectors to inherit the properties from other selectors. Here’s a quick example :

.box1.container {
     padding: 8px;
     color: #3e3e3e;
     border: 1px solid #bfbfbf;
}
.box2 {
     @extend input;
     background: #f1f1f1;
}

This would then compile to :

.box1.container,
.box2.container {
     padding: 8px;
     color: #3e3e3e;
     border: 1px solid #bfbfbf; }
.box2 {
     background: #f1f1f1;
}

These are some of the cool SCSS features that i use in my production code at Styloot. If these features don’t tempt you to switch to SCSS, try this: With SCSS, you can create css sprites WITHOUT resorting to some external sprite generators or pixel nudging in Photoshop. How, you ask? Take a look at this quick tutorial here.

SCSS adds loads of features that make your life easier as a front-end developer. There are many among us who think CSS is sufficient as it is. My advice would be to give SCSS a try & choose whatever works for you best. In the end, it all comes down to your personal preference.

Click here to get started with SCSS right away!

Further reading :

• SCSS Documentation
• Compass
• Difference between SCSS & SASS
• Comparision between LESS & SASS

Alternatives to SCSS :

• LESS
• Stylus