CODE TURBO CHARGE YOUR FRONT END DESIGN WITH SASS OR LESS

  • By Andy Burns
Andy Burns

SASS (Syntactically awesome stylesheets)/LESS (not an abbreviation) are CSS pre-processors. If you haven't heard of them then you should jump in now and start using them.

Simply put, these two languages compile down into vanilla CSS, but add many timesaving features and utilities to speed up frontend design & maintenance.

As of SCSS (it's previous incarnation, used a different indentation-based syntax), both these languages are supersets of CSS. This means any valid CSS file is also a valid SASS/LESS file (though not vice-versa).

Pre-compiler basics


The best way to get up and running with a CSS pre-processor is to download

Top-five features


A full introduction to either SASS or LESS would not take long but there are already plenty of good tutorials. A couple are listed below

1. VARIABLES


Variables allow you to define colours, sizes or other attributes (ie, fonts) in one place and reuse them throughout.

// SCSS
$bg_main = #f0f0f0;
$fg_main = #02ab02;
body { background-color: $bg_main; }
p { color: $fg_main; }


// LESS
@bg_main = #f0f0f0;
@fg_main = #02ab02;
body { background-color: @bg_main; }
p { color: @fg_main; }

2. MIXINS


With mixins, you can re-use common patterns throughout your code. They work just like methods or functions:

// SCSS
@mixin Rounded(@radius) { border-radius: @radius; }
@mixin Circular() { @include Rounded(50%); }

// LESS
.Rounded(@radius) { border-radius: @radius; }
.Circular() { .Rounded(50%); }

3. NESTING


With nesting you can declare a main element and don't have to worry about lengthy class-lists for subelements - they're taken care of by the pre-processor:

// SCSS
.panel {
@include Rounded(2px);
border: 1px solid $bg_main;

.panel-footer {
background-color: $fg_main;
}
}

// LESS
.panel {
.Rounded(2px);
border: 1px solid @bg_main;

.panel-footer {
background-color: @fg_main;
}
}

Both these examples would compile to the same output, which takes care of the .panel-footer class nesting for you:

// Output
.panel {
border-radius: 2px;
border: 1px solid @bg_main;
}

.panel .panel-footer {
background-color: #02ab02;
}

4. @INCLUDE/@IMPORT


When working on any project beyond a single-page application, being able to seperate out different parts of your design and include them seperately is very useful.

// SCSS @include "reset.scss" @include "colours.scss"

// LESS @import "reset.less" @import "colours.less"

Note: the scss included files don't necessarily need to be prefixed with an underscore, but this convention causes the compiler not to process the individual files outside of the main file they're @included in. See project structure for more on this.

5. LOOPS & CONDITIONS


Loops and conditions continue the programmatical extension of stylesheets and could be used to simplify a variable column set-up:

// SCSS
@for $i from 1 through 4 {
.column-#{$i} { width: ($i * 100%) / 4; }
}

// LESS
.make-columns(4);

.make-columns(@n, @i: 1) when (@i =< @n) {
 .column-@{i} { width: (@i * 100% / @n); }
 .make-columns(@n, (@i + 1));
}

// Output
.column-1 { width:  25%; }
.column-2 { width:  50%; }
.column-3 { width:  75%; }
.column-4 { width: 100%; }

Project Structure


As mentioned in top-five features, you can pull in other files to build one overarching CSS masterfile. This main file can then be minified and shipped in production.

An example project structure would be to define global project elements and narrow down to more specific items in subsequent 'partial' files, with the main file only serving to import the rest. In this way, you can add different elements of your project as 'partial' files (which do not get seperately compiled) and bring them all together in the primary file:

css/
|
|-- modules/            # Any included compass or other common modules
|   |
|   |-- _css3.scss
|   |-- _animation.scss
|   ...
|
|
|-- partials/           # The building blocks of your design
|   |
|   |-- _reset.scss
|   |-- _colours.scss
|   |-- _typography.scss
|   |-- _buttons.scss
|   ...
|
|-- vendor/             # CSS from other projects
|   |
|   |-- _carousel.scss
|   |-- _lightbox.scss
|   ...
|
|-- main.scss           # The primary file: include modules, partials, vendor etc

Should I use LESS or SASS?


There is a lengthy and somewhat long-in-the-tooth debate over which is best. In truth there is very little between the two, though if you are unsure, just go with SASS.

If you have any preferences or preconceptions, just go with your preferred choice. Either is better than not using a pre-processor and both will save you time.

Further reading


For an excellent introductory tutorial to either language, I have found the following resources to be invaluable:

SASS


Scotch.io SASS introduction
SASS Basics (sass-lang.com)
SASS And Compass in Action (print book)

LESS

LESS Tutorial
Getting started with LESS (lesscss.org)

Download links

Note: if you are using Visual Studio 2013 update 2 or later, there is already built in support for both LESS and SASS: (MSDN blog post).

SASS


There are numerous command-line and gui-based options for SASS:

sass-lang.com install page

However, if you are comfortable with the command line and/or already have an installation of Ruby, you can easily install the gem with:

gem install sass

and thereafter compile files with:

sass input.sass output.css

LESS


To use LESS, the easiest solution is with Node.js and the associated package manager, NPM:

npm install -g less

Then, simply invoke the compiler with:

lessc styles.less > styles.css

Alternatively, it is possible to <link href="lessFile.less"> the less file directly and provide the <script src="less.js"></script> javascript file for client-side compilation.

scroll back to the top of the current web page