New theme in development and is currently live on BuddyCore.com - Please check back often for updates (11/12/16).
SASS Logo

Front-End · Tutorials

Getting Started with SASS

·

Syntactically Awesome Stylesheets or SASS for short is a CSS pre-processor which compiles your code in the SASS syntax to CSS. It brings a host of useful features such as nesting, variables, vendor prefixing, functions and mixins.

1) Nesting

In CSS typically you write code like this;

div.container {
    width: 70%;
    float: left;
}

div.container header h2 {
    font-size: 24px;
    font-weight: bold;
}

You nest on one line essentially in which the line length can become long and is hard to manage if you don’t have a suitable naming convention and a grasp on the HTML markup you are styling.

With nesting in SCSS (which is an alternative syntax in SASS) it adds some sort of structure to an otherwise verbose system. We can now do the following with SCSS;

div.container {
    width: 70%;
    float: left;
    header {
        h2 {
            font-size: 24px;
            font-weight: bold;
        }
    }
}

This is much more manageable. You can have a better workflow by embracing this technique at minimum or look more into different writing styles like BEM (Block Element Modifier).

2) Variables

Variables are useful when building larger projects and no more do you have to keep referencing design files in Photoshop or Sketch to get a hex value for a colour. Simply save it as a variable, include it as a partial file and use as and when required.

To get started variables in SCSS are set like this;

$primary_colour: red;
$accent_colour: green;

Then to use them in your CSS;

div.container {
    background: $primary_colour;
}

3) Functions

You can use these variables with or without some of the functions inside of SASS but ones that may be worth noting are lighten() and darken(). A simple function but useful when designing layouts.

You can pass a base colour into these functions lighten($primary_colour, 10%); and apply it to a CSS rule. The end result will be a lighter or darker shade of the colour passed.

There are many functions available, take a look at the documentation for a list of available functions.

4) Vendor Prefixing

In your build script or GUI application you use to compile the SCSS you are able to specify backwards compatibility for vendor prefixing. As browsers have changed at different versions the specific syntax may have changed for certain rules like -webkit-transition: is now simply transition However you may need to support older browsers which still use the former syntax.

5) Mixins

Mixins are functions you can write to do specific things in CSS like build dynamic grids with different margins, set border-radius on multiple items. Mixins can accept parameters and again the final output is rendered into plain ol’ CSS.

6) Build Scripts and GUIs to Get Started

I use the free version of PrePros which is a gui application that essentially runs the watch command in SASS on files you specify. You can also use a build tool like GruntJS to compile the SCSS.

Leave a Reply

Your email address will not be published. Required fields are marked *

Loading more content...
Minimum Requirements

Your device does not meet the minimum requirements to view this site, please considering increasing your device width to more than 300px.