CSS pre-processing

IDE Support

• IntelliJ Products
  • PyCharm
• Visual Studio 2012

• Koala
• SimpLESS

3rd Party GUIs

Variables

/* LESS */
@nice-blue: #5B83AD;
@light-blue: @nice-blue 
                + #111;

#header {
  color: @light-blue;
}

//Output
#header {
  color: #6c94be;
}

Pretty self-explanatory.
They're actually "constants".

/* SASS */
$primary-color: #333;

body {
  color: $primary-color
}

// Output
body {
  color: #333;
}

Mixins

A way of including a bunch of properties from one rule-set into another rule-set. 
Think: "inheritance"

/** SASS **/
.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

/** LESS **/
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

#menu a {
  color: #111;
  .bordered;
}

.post a {
  color: red;
  .bordered;
}

NOTE: This is called "extending" in SASS

Parametric Mixins

Mixins can also take arguments, which are variables passed to the black scope when it is mixed in.

/** SASS **/
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { 
    @include border-radius(10px); 
}

/** LESS **/
.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

/** Or with a default value **/
.border-radius(@radius: 5px) { 
   ... 
}

.button {
  .border-radius(6px);
}

#header {
  .border-radius;
}

NOTE: These are what are called "mixins" in SASS

/** Both LESS & SASS**/
#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

//Output
#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

Code is more concise, and mimics the structure of your HTML.

Nesting

Operators

Doing math in your CSS is very helpful. Both libs include a handful of standard math operators like +, -, *, /, and %.

/** LESS **/
@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

color: #888 / 4;
background-color: @base-color 
                    + #111;
height: 100% / 2 + @filler;

/** SASS **/
container { width: 100%; }

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complimentary"] {
  float: right;
  width: 300px / 960px * 100%;
}

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns '50%'
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}

Less provides a variety of functions which transform colors, manipulate strings and do maths.

Functions

/** LESS only **/
@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

Variables and mixins are first looked for locally, and if they aren't found, the compiler will look in the parent scope, and so on.

Scope

More info available

http://lesscss.org/features/

http://sass-lang.com/guide