How I got started with Sass

This very site was my first built using Sass (Update: now my previous site). In this post I’m going to share how I got started using Sass, and what features I felt most comfortable implementing as a newbie.

My Setup

I’m not going to walk through installing Sass, if you need help I refer you to the Official Sass Documentation. You will need to open the Terminal I’m afraid, but don’t panic! It’s as simple as copying and pasting, then you can go use some neat UI tools to do the rest.

Codekit – My main need for Codekit was to watch and compile my Sass into CSS. But it does so much more than that! It combines and minifies files, optimise images and has live browser reloads! It’s pretty nice (for us more lazy folk) to be able to save, and then glance over at your browser while it refreshes.

Compass – Compass is a Sass framework, in a nutshell it’s a collection of helpful tools and ready-to-use CSS3 Mixins (more on that later.)

Partial Sass Files – Partial Sass files contain little snippets of CSS. This is a great way to modularise CSS and keep it really maintainable. A partial is simply a Sass file named with a leading underscore. The underscore lets Sass know that the file is only a partial file and that it should be generated into a CSS file. Then you can import these partials into a main Sass files which will combine it to serve a single CSS file to the browser.

File Structure

Importing the Partials (and Compass) into my styles.scss

@import "compass";
@import "partials/variables";
@import "partials/mixins";
@import "partials/normalize";
@import "partials/base";
@import "partials/layout";

Which outputs my main css files styles.css

Variables

Variables are a way to store information that will get reused throughout a stylesheet. I kept my use of variables to colours and padding/margin. These were elements I was going to reuse repeatably.

In my _variables.scss file

$color1: #DD4B4C; // Red
$color2: #F8F6F5; // Beige Grey
$color3: #525D63; // Dark Grey
$color4: #414A50; // Darkest Grey
$color5: #FFFFFF; // White	
$secondarycolor1: #FAD232; // Yellow
$secondarycolor2: #42B8DD; // Blue
$secondarycolor3: #14C18F; // Green

$section-padding:3em;
$section-margin:3em;

To implement a colour:

nav {
    background:$color4;
}

Outputs the following in my styles.css:

nav {
     background:#414A50;
}

Nesting

Sass lets you nest CSS selectors in a way that follows the same visual hierarchy as HTML.

nav {
    background:$color4;
    position:relative;
    text-align:center;
    min-height:60px;


    a {
	color:$color5;
      }
}

Here the ‘a’ is nested inside the ‘nav’ selector.

The output for this will be:

nav {
    background:#414A50;
    position:relative;
    text-align:center;
    min-height:60px;
}


nav a {
   color:#FFFFFF;
}

Color Functions

I wanted to create a border rule that was slightly darker than the background colour. I was able to use a Shade Color Function.

.content-item--border {
        border-top:2px dotted shade($color2, 8%);
}

This takes #F8F6F5 (set as the variable $color2) and mixes it with black by 8%.

This outputs the following CSS:

.content-item--border {
        border-top:2px dotted #e4e2e1;
}

The great part about using this Color Function with a variable is if I ever want to change my background it will also update my border colour, (I’m English hence the spelling of colour/color) to be a darker shade of the new background colour.

There are many Color Functions to try out, this is an excellent article on the topic, which I refer to often.

Mixins

A mixin is a group of CSS declarations that can be reused throughout a site. You can even pass in values to make your mixin more flexible. I set up a mixin for my core button styles:

@mixin button {
	display:inline-block;
	padding: 0.9em 1.5em;
	font-size:1em;
	letter-spacing:0.1em;
	text-transform: uppercase;
	font-weight:400;
	@include border-radius(8px, 8px);
	@include transition(all 0.3s ease-in-out);
}

N.B You may have noticed I’m already including two predefined mixins within my mixin. These are Compass CSS3 mixins, therefore I don’t need include all the prefixed options, or make my own mixin for these. Compass will output these for me.

I can then include this mixin I named ‘button’, and add more styles that are specific to just this button with a class of ‘button-main’:

.button-main a {
    @include button;
    background-color:$color1;
    color:$color5;
    border:0;
    @include box-shadow(0px 5px 0px 0px shade($color1, 15%) );
}

Which outputs:

button-main a {
    display:inline-block;
    padding:0.9em 1.5em 0.65em 1.5em;
    font-size:16px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    font-weight:400;
    -webkit-border-radius:8px 8px;
    -moz-border-radius:8px / 8px;
    border-radius:8px / 8px;
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
    background-color:#dd4b4c;
    color:#fff;
    border:0;
    -webkit-box-shadow:0px 5px 0px 0px #bb3f40;
    -moz-box-shadow:0px 5px 0px 0px #bb3f40;
    box-shadow:0px 5px 0px 0px #bb3f40;
}

This styles the red button (below). I was then able to import the ‘button’ mixin for other button variations, and just add the different properties to a new selector. Such as my ‘Start a Project’ button which adds a background image/colour, and box shadow.

Operations (Math!)

I kept my use of Operations basic as a newbie. Remember those section margin and padding variables I setup at the beginning? Well sometimes I needed to change them slightly to work with different layouts, but I liked the idea of having these base values to start from.

.single-container {
	padding-bottom: $section-padding*1.25;
}

This multiplied my set $section-padding (3em) by 1.25 = 3.75em.
You can also use +, -, /, and %.

If you’re thinking about using Sass for the first time I hope this case study has inspired you to try out a selection of its features. Then as you feel more confident build your knowledge from there, just like I’m doing now.