CODE TURBO CHARGE YOUR FRONT END DESIGN WITH SASS OR LESS
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.
