Getting Started With SASS

If you do any front-end development over the past couple of years then you would of heard of CSS pre-processors. The most common CSS pre-processors are SASS, LESS, or Stylus.

CSS pre-processors are scripts that will compile code and output the results into CSS stylesheets. They allow you to create more dynamic, optimized and organised CSS for your websites.

In this article I am going to investigate what it is like to get started using SASS and if it really helps with creating your CSS stylesheets.

SASS

Sass Logo

Installing SASS

SASS uses ruby gems packages to perform the scripts that it needs to compile the code into stylesheets. Therefore before you do anything with SASS you need to install the ruby packages on your operating system.

If you're using a distribution of Linux, you'll need to install Ruby first. You can install Ruby through the apt package manager, rbenv, or rvm.

If you're using a Mac then the Ruby packages you need already come installed so no need to do anything.

If you're using a Windows machine then you can install ruby using the ruby installer, that will install everything for you with one click.

Ruby Installer

SASS Applications

Using SASS to compile the stylesheet can be done on the command line but you can get applications that act as file watchers that will know when you make code changes to your SASS files, when a change is made the application will notice this and compile the SASS files to output the CSS stylesheet which you can use on your website.

Here are some of the most popular SASS applications.

Codekit

codekit

Codekit

Compass.app

compass

Compass.app

Koala

koala

Koala App

LiveReload

livereload

LiveReload

Prepros

prepros

Prepros

Advantages Of Using SASS

With all this extra work to create your stylesheets there must be some really good reasons to use it. In this article we are going to look at the advantages of using a pre-processor like SASS and how they can be used to improve the CSS that you write and reduce the amount of style that you actually need to write.

Variables

CSS variable don't currently exist in normal CSS, recently Firefox has been playing around with CSS variables but you can't use them on other browser so we're not quite there yet, for now we need to continue using a pre-processor.

Variables are a way of storing values so that you can reuse these elsewhere in your script. This will allow you to create generic values for padding or margins and reuse these same values elsewhere in your website. The benefit of variables is that if you need to change these then you only have to make the change in one place.

If you have done any programming in other languages then you will be familiar with the way variables work and in SASS they work exactly the same way.

$marginTop: 30px;
$marginBottom: 50px;

p
{
  margin: $marginTop 0 $marginBottom;
}

.content-area
{
  margin-top: $marginTop;
  margin-bottom: $marginBottom;  
}

This is a very simple example of how you can keep consistency in your designs by using the same values for your margins, so if you ever want to change the design and reduce the margin then you only have to do this in one place and it will change your entire site.

When this is compiled into CSS it will output the stylesheet like this.

p
{
  margin: 30px 0 50px;
}

.content-area
{
  margin-top: 30px;
  margin-bottom: 50px;  
}

Nesting

With HTML you can nest tags within other HTML tags, then you can target these nested tags in your CSS by using both selectors.

.header .navigation
{
  // style navigation in the header
}

When you have a lot of nested tags this can get become hard to follow in your CSS, with SASS it allows you to nest these selectors to give you a logical hierarchy for the selectors.

.header
{
  .navigation
  {
    // style navigation in the header
  }
}

When this is compiled it will output the exact same code as above, you don't really see the benefit of nesting in an example without much code so we shall add some more selectors to style the ul, li, a within the header navigation.

.header
{
  .navigation
  {
    // style navigation in the header
    ul
    {
      // style UL inside the navigation
    }

    li
    {
      // style list items in navigation
      a
      {
        // style links in list item
      }
    }
  }
}

This will output the compiled code in the normal CSS selectors.

.header .navigation
{
  // style navigation in the header
}

.header .navigation ul
{
  // style UL inside the navigation
}

.header .navigation li
{
  // style list items in navigation
}

.header .navigation li a
{
  // style links in list item
}

Partials

One of the problems I find with my CSS is organisation in the file, it's not great practice to split up your CSS files into different sections and include these separately. There are two ways we will need to include these, you can do this by using a new link tag for each style sheet.

<link rel="stylesheet" href="header.css" type="text/css" media="all" />
<link rel="stylesheet" href="main-content.css" type="text/css" media="all" />
<link rel="stylesheet" href="sidebar.css" type="text/css" media="all" />
<link rel="stylesheet" href="footer.css" type="text/css" media="all" />

But this will create a lot of extra HTTP requests on each page and will slow down your site. The other option is to use the @import function inside your CSS files to include a stylesheet inside another stylesheet. This again is bad practice as it will make further HTTP request calls to include the file into your stylesheet.

With SASS you can use partials to create new .scss files with all the styling for your website, then you can include these into your SASS file.

Within your SASS file you can use the following @import keyword to include the styles.

@import 'scss/_fonts';
@import 'scss/_generic';
@import 'scss/_header';
@import 'scss/_maincontent';

When the stylesheet is being compiled it will now include the styles in the output and place all these in one file, therefore causing no additional HTTP requests.

When you import these partials into the SASS file you will need to use the file format of scss.

Functions

SASS allows you to create functions in your SCSS files these are similar to functions that you find in other programming languages, as you can call these from anywhere in your SCSS files and it will print the return of the function.

These are really useful if you find yourself writing the same things again and again. Functions in SCSS files are called mixins and just like functions in other languages they allow you to pass in a number of arguments to change the value of the output of the mixin.

Again with this you only see the real benefit when you have a real world example to see how you can use this. In this example we will create a box shadow mixin that we can then reuse on any element that we want a shadow on. If you want to support older browsers then you will have to add prefixes to your shadow property. Therefore we can create a mixin that we can use so we don't need to add every prefix next time we want to add a shadow.

@mixin create-box-shadow($horizontal, $vertical, $blur, $spread, $colour) 
{
  -webkit-box-shadow: $horizontal $vertical $blur $spread $colour;
  -moz-box-shadow: $horizontal $vertical $blur $spread $colour;
  box-shadow: $horizontal $vertical $blur $spread $colour;
}

We can now use this on any element we want to add a shadow, by using the @include operator.

h1
{
   @include create-box-shadow(10px, 20px, 5px, 0, #000);
}

h2
{
   @include create-box-shadow(15px, 15px, 5px, 0, #000);
}

h3
{
   @include create-box-shadow(10px, 10px, 0, 0, #000);
}

With just one line we've added a box shadow to these 3 elements with prefixes, another benefit of doing this with a mixin is that when all prefixes are removed from the browsers we can simply update our mixin by removing the prefixes.

@mixin create-box-shadow($horizontal, $vertical, $blur, $spread, $colour) 
{
  box-shadow: $horizontal $vertical $blur $spread $colour;
}

Therefore we only have to change this in one place and it will update the code everywhere in your stylesheet.

Another benefit of using a mixin for something like this is that we can add additional properties to this mixin that will be used by all shadows, we can also use operators to have variable values for the properties. For example as we are adding a shadow to these elements we might need to add additional spacing above and below the elements to make sure that the shadow doesn't move over other elements. But because we are using a mixin with arguments the size of the shadow can be different, therefore we need to work out the top and bottom margin from the vertical value of the shadow.

The following code will take the vertical property, multiple it by 2 and use this value as the margin top and margin bottom property.

@mixin create-box-shadow($horizontal, $vertical, $blur, $spread, $colour) 
{
  box-shadow: $horizontal $vertical $blur $spread $colour;
  margin: ($vertical * 2) 0;
}

On the header elements this will now compile the stylesheet to the following.

h1
{
  box-shadow:10px 20px 5px 0 #000;
  margin:40px 0
}

h2
{
  box-shadow:15px 15px 5px 0 #000;
  margin:30px 0
}

h3
{
  box-shadow:10px 10px 0 0 #000;
  margin:20px 0
}

Maths Operators

Above we saw how you can use multiple to change the values inside a mixin but we can also use other maths operators %, +, -, * and / in your values which come in handy when creating a grid system.

.grid-1
{
  width: 100% / 12;
}
.grid-2
{
  width: (100% / 12) * 2;
}
.grid-3
{
  width: (100% / 12) * 3;
}
.grid-4
{
  width: (100% / 12) * 4;
}
.grid-5
{
  width: (100% / 12) * 5;
}
.grid-6
{
  width: (100% / 12) * 6;
}
...

We have now got classes that we can use for a grid system on our site, even better than using this would be to create a new mixin grid-column so we can change the guttering and margins for the columns.

@mixin grid-column($column) 
{
  width: (100% / 12) * $column;
  margin: 0 10px;
  padding: 0 10px;
}
.grid-1
{
  @include grid-column(1);
}
.grid-2
{
  @include grid-column(2);
}
.grid-3
{
  @include grid-column(3);
}
.grid-4
{
  @include grid-column(4);
}
.grid-5
{
  @include grid-column(5);
}
.grid-6
{
  @include grid-column(6);
}
...

Extending / Inheritance

One of the best features of SASS is the ability to inherit the styles from another selector and share this with another, allowing you to cut down on the amount of the styles that you need to write. This is similar to grouping selectors in CSS allowing selectors to share the same styles.

h1, h2, h3, h4, h5, h6
{
  margin-bottom:30px;
}

We can use inheritance in the above grid example to improve the output code, in this example we have the margin and the padding inside the mixin, which means on the output code the margin and padding will each be added inside the each of the different grid classes. For our SASS file this is obviously fine because we still only have to add this property once, but in the compiled output we have the margin and padding defined on each grid column, when we should be grouping them as they are always going to be the same value.

We can group these selectors by using SASS inheritance, this is done by creating a style that we can reuse and then using the @extend keyword on the styles where we want to inherit this.

@mixin grid-column($column) 
{
  width: (100% / 12) * $column;
}
.grid
{
  margin: 10px;
  padding: 0 10px;
}
.grid-1
{
  @include grid-column(1);
  @extend .grid;
}
.grid-2
{
  @include grid-column(2);
  @extend .grid;
}
.grid-3
{
  @include grid-column(3);
  @extend .grid;
}
.grid-4
{
  @include grid-column(4);
  @extend .grid;
}
.grid-5
{
  @include grid-column(5);
  @extend .grid;
}
.grid-6
{
  @include grid-column(6);
  @extend .grid;
}

This will now group all the selectors that extend .grid with the .grid selector compiling the stylesheet as.

.grid,.grid-1,.grid-2,.grid-3,.grid-4,.grid-5,.grid-6
{
  margin:10px;
  padding:0 10px
}
.grid-1{width:8.333%}
.grid-2{width:16.667%}
.grid-3{width:25%}
.grid-4{width:33.333%}
.grid-5{width:41.667%}
.grid-6{width:50%}
...

Referencing Parent Selectors

There are times when you need to style an element using pseudo classes such as the hover element on a link. You need to style anchor tags and then you might want to change this styling for the hover event. In SASS you can use nested selectors, and we can reference parent selector by using an & in the selector. Therefore we can nest the hover event inside the anchor tag styling.

a 
{
  text-decoration: none;
  
  &:hover 
  {
    font-weight: bold; 
    text-decoration: underline; 
  }

  &:active
  {
    color: blue;
  }
}

Color Functions

One of my favourite features of SASS is the ability to change the shade of colours by using the lighten or darken functions. These functions take 2 parameters, the first is the starting point for the color the second is the amount of change you want to apply. For example you can have a starting color of black and return a color value 20% lighter.

.button
{
  background: #000;
  &:hover
  {
    background: lighten(#000, 20%);
  }
}

There are lots more color functions that you can use with SASS but I found that lighten and darken was the functions I used most, the other functions include:

  • rgb()
  • mix()
  • saturation()
  • greyscale()
  • invert()

SASS Color Functions

These are just some of the features and advantages that you get with SASS, hopefully from these show you the advantages that you can get with using SASS. With the advantages of partials for organisation and mixin for the use of functions and variables, hopefully this shows how you can increase the efficiency, future proof your CSS and still allowing you reuse the styles you have created.

Try it out for yourself on your next project.

SASS

Advertise here 50% Off

Comment