Our Development Tools (Part 1)

What are CSS Preprocessors?

We have used two different preprocessors at Sideways8, LESS and SASS. Preprocessors are used in many different languages and have been around for a very long time. The idea is very simple, a preprocessor is a program that takes input, processes it and produces an output that can be used as input by another program/technology. Preprocessors in CSS are no different. CSS preprocessors take code written in a specific syntax (i.e., SASS, SCSS, LESS, etc) and converts it to CSS so the browser can read it. Seems like an extra step, so why do it? Well, there are some powerful concepts that these languages can implement. These include, but are not limited to, variables, nesting, partials, importing, mixins, inheritance, operators and control directives. All of these things make writing CSS easier to manage, cleaner and more versatile. I will do my best to address all of the aforementioned benefits later in this post.

There are a few different languages that you can use. We have personally used LESS and SASS at Sideways8 but have decided on SASS (Syntactically Awesome StyleSheets) with the SCSS syntax as our language of choice in our frameworks. SCSS, or “Sassy CSS”, was introduced in version 3 of SASS as the new main syntax. This is because it is visually and conceptually more similar to actual CSS. It is actually a superset of CSS, meaning that any valid CSS is also valid SCSS. This was not the case in SASS which was the reasoning for developing the new syntax.

Variables:

Let’s get on to the benefits of using SCSS. Variables, just like in other programming languages, is a way to store a value and use it in other parts of the software. Please excuse the brevity of my explanation of a variable, a full explanation is out of scope of this particular blog post :). This allows you to set a color, say grey, to a particular type of grey and just use the variable $grey instead of having to write the hex for it each time. Here is an example of some of our variables we use:

// Colors
$black: #000;
$pseudo-black: #333;
$dark-grey: #444;
$grey: #888;

// Fonts
$open-sans: 'Open Sans', sans-serif;
$lato: 'Lato', sans-serif;
$oxygen: 'Oxygen', sans-serif;

// Aliases
$body-font-stack: $lato;
$heading-font-stack: $oxygen;

// Helpers
$helper-font-size: 12, 14, 16, 18;
$helper-font-weight: 300, 400, 600, 700;
$helper-margin-values: 0, 10, 20, 30, 40, 50, 60;
$helper-padding-values: 0, 10, 20, 30, 40, 50, 60;

Nesting:

This is my absolute favorite and is the one thing that makes switching back to regular CSS syntax so difficult. Nesting allows you to nest CSS selectors in the same way you can nest HTML elements so that visually it makes more sense and prevents the repeated writing of selectors over and over again. For instance:

.button {
  @include border-radius(px2rem(4px));
  padding: px2rem(10px) px2rem(25px);
  &.gold {
    background: $gold;
    border: 2px solid transparent;
    text-transform: uppercase;
    &:hover {
      background: $off-white;
      color: $gold;
      border: 2px solid $gold;
    }
  }

However, be careful with this concept. You can get in trouble by writing overly specific and overly complicated selectors, which can make the code even more unmanageable.

Partials:

The name is quite descriptive on this one. Partials allow you to create little snippets of CSS and include them in other files. These files are prefixed with an underscore which lets SASS know that it is a partial file and that it should not be generated into its own CSS file. This helps modularize your CSS, making it more maintainable and easier to read. You can use partials by using the @import directive which I will address next.

Importing:

This allows you to use different partials as well as other SASS files and combine it with the SASS file you import it into. Although, CSS does have import functionality, that requires an extra HTTP request to accomplish. In SASS, however, the files are preprocessed and converted into valid CSS so that there is only one file being served to the web browser.

Mixins:

These are great ways to write specific blocks of code that can be used throughout other SASS files. Mixins are likened to functions in which you can write a block of code, allow it to take an input and use that function throughout other parts of your code. This can be great for things like border-radius, transform, rotate, etc where a block of code requires vendor prefixes. That way you can limit the amount of code you actually have to write each time and focus on building beautiful and functional websites. Mixins are used by using the @mixin directive and a name. In this example I pass a variable into the mixin so that we can create a border radius of 5px without having to write all of the vendor prefixes each time we need to use it.

@mixin border-radius( $value ) {
  -webkit-border-radius: $value;
  -moz-border-radius: $value;
  border-radius: $value;
}

.button {
  @include border-radius(4px);
}

Extending/Inheritance:

This is another incredibly useful feature of SASS. This allows you to re-use a set of properties from another selector and add on to it.

// To add a clearfix via a SCSS file, use `@extend .clearfix`
.clearfix {
  &:after {
    content: '';
    display: table;
    clear: both;
  }
}

footer.comment-meta {
    margin-bottom: px2rem(12px);
    @extend .clearfix;
    .comment-author {
      border: none;
      display: inline;
      margin: 0;
      padding: 0;
      img.avatar {
        float: left;
        margin: 0 px2rem(10px) px2rem(8px) 0;
      }
    }
  }

Operators:

Math in CSS?! Yes, you heard me correctly. You can use operators in SASS to do calculations. This is particularly useful in calculating widths when not using a CSS framework like Foundation or Bootstrap. The following example is a function we use in our frameworks to convert pixels to rem values.

$base_pixel_size: 16;

@function getRem( $value ) {
  @return ( $value / $base_pixel_size ) + rem;
}

Control Directives and Expressions:

This is something that I wanted to discuss since it is a core SASS feature. These types of directives and expressions allow for including styles based on certain conditions. These directives are @if, @each, @for and @while. Just like other programming languages, you can specify that you want to include a certain style “if” a particular condition is true or not or you can loop through a series of variables depending on the bounds specified. Here is an example of snippet that we use to calculate custom column counts for the Foundation framework.

@each $col-count in $custom-column-counts {
    $single-width: 100 / $col-count;
    @for $i from 1 through $col-count {
    .small-#{$i}-#{$col-count}th {
        width: $single-width * $i * 1%;
    }
}

@for $i from 1 to $col-count {
    .small-offset-#{$i}-#{$col-count}th {
        margin-left: $single-width * $i * 1%;
    }
}

Conclusion

All in all CSS preprocessors are a great way to make writing CSS feel a little more like programming. It leverages tried and true concepts used by almost every other programming language to accomplish better efficiency, management and modularization of CSS code. You can choose for yourself what preprocessor to use but with a lot of experimenting and testing we felt that SASS (using the SCSS syntax) was the best for us as a company.

There are a lot more features of SASS that I have not discussed in this post, mainly because this post series is based on what we use the most in our day to day. However, if you would like to read up more on SASS please do so here: http://sass-lang.com/documentation/file.SASS_REFERENCE.html