Getting Sassy with SCSS

SCSS, or “Sassy CSS” is a great way to improve your website styling workflow. This compiled CSS language includes many great features. In this article we’re going to cover a few of these features:

• Variables
• Nested Styles
• Built-in Functions

Before You Get Started

The nature of SCSS, as a compiled language, requires special considerations. You will be working in a .scss file, lets call it styles.scss, a web browser cannot read styles.scss, so what happens is that you will convert the .scss file into a readable .css file that your browser can read, so your website will be reading styles.css instead. You will need to use a developer tool that compiles SCSS, either natively or via a plugin. Personally, I use Adobe Dreamweaver, which includes native support for SCSS. When I save styles.scss file, it will automatically compile the SCSS code into a valid styles.css file a web browser can read.

Nested Styles

One of the big benefits of SCSS is the nested styles. It can help make your stylesheet much more readable while working in it, and can remove some repetitive selectors. For this article, we are going to have 2 buttons. Here’s the html and css for the 2 buttons:

<style>
  .btn{
    display: inline-block;
    color: #ffffff;
    padding: 10px 24px;
    font-size: 14px;
    text-transform: uppercase;
    text-align: center;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    background-color: #000000;
    transition: background-color 0.4s;
    font-family: sans-serif;
  }
  .btn:hover{
    background-color: #666666;
  }
  .btn.blueBtn{
    background-color: #4e88d0;
  }
  .btn.blueBtn:hover{
    background-color: #3a7acb;
  }
  .btn.redBtn{
    background-color: #df1515;
  }
  .btn.redBtn:hover{
    background-color: #830604;
  }
  .btn.bigBtn{
    font-size: 18px;
  }
</style>
<a href="#" class="btn blueBtn bigBtn">Blue Button</a>
<a href="#" class="btn redBtn">Red Button</a>

So one of the big things we see in this, is that we are writing out the hex values for 7 different colors, presumably colors that you’ll want to reference later in other parts of your CSS. So that’s where SCSS variables come in. You define variables with a dollar sign ($) before the variable name. You then use that name to reference the variable, like this:

$white: #ffffff;
$black: #000000;
$darkGray: #666666;
$blue: #4e88d0;
$darkBlue: #3a7acb;
$red: #df1515;
$darkRed: #830604;

.btn{
	color: $white;
 	background-color: $black;
}
.btn:hover{
	 background-color: $darkGray; 
}
.btn.blueBtn{
 	background-color: $blue;
}
.btn.blueBtn:hover{
 	background-color: $darkBlue;
}
.btn.redBtn{
 	background-color: $red;
}
.btn.redBtn:hover{
 	background-color: $darkRed;
}

Once compiled, your css would replace the variables with their defined values, and output this:

.btn{
	color: #ffffff;
 	background-color: #000000;
}
.btn:hover{
	 background-color: #666666; 
}
.btn.blueBtn{
 	background-color: #4e88d0;
}
.btn.blueBtn:hover{
 	background-color: #3a7acb;
}
.btn.redBtn{
 	background-color:  #df1515;
}
.btn.redBtn:hover{
 	background-color: #830604;
}

This example shows how you can use variables for color names, so that you can be certain every instance of Blue on your site will be the correct blue, every time, without needing to remember the hex value. It also means that if you wanted to universally change that blue to a darker blue, you’d just need to change it in one place, save your SCSS file, and your new CSS file will update with the new color.

Nested Styles

A big part of SCSS is the nested styles. This makes your file much easier to read, and eliminates the need for some repeated parts of a selector. Here’s a simple example of a nested style:

.btn{
  color: $white;
  background-color: $black;
  
  &:hover{
    background-color: $darkGray;
  }
  
  &.blueBtn{
    background-color: $blue;
   
    &:hover{
      background-color: $darkBlue;
    }
  }
  
  .icon{
  	 font-size: 10px;
  }
}

Once compiled, the resulting CSS would look like this:

.btn{
  color: #ffffff;
  background-color: #000000;
}
.btn:hover{
  background-color: #666666;
}
.btn.blueBtn{
  background-color: #4e88d0;
}
.btn.blueBtn:hover{
  background-color: #3a7acb;
}
.btn .icon{
  font-size: 10px;
}

When a nested element is compiled, it takes that item’s selector, and adds a space before it, then grabs all selectors above it in the hierarchy (see the .btn .icon selector). If a nested item begins with an ampersand (&), it tells it to not include a space between it and its immediate parent.

Built-In Functions

SCSS has a lot of built-in functions that can make some repetitive tasks easier. I’m going to talk about the color function darken(). This function will take a color supplied to it, and reduce the lightness value of the color. So instead of defining Blue, Dark Blue, Red, and Dark Red, we can define just Blue and Red. the darken() function accepts 2 arguments, the color, and the darken value (percentage). So we could set up our button css like this:

$white: #ffffff;
$blue: #4e88d0;

.btn{
  color: $white;
  
  &.blueBtn{
    background-color: $blue;
   
    &:hover{
      background-color: darken($blue,5%);
    }
  }
}

and our resulting CSS would be:

.btn{
  color: #ffffff;
}
.btn.blueBtn{
  background-color: #4e88d0;
}
.btn.blueBtn:hover{
  background-color: #3a7acb;
}

To learn more about SCSS, take a look at the documentation at SASS-Lang.com