Sass

// Variables // You give them a name and a value and after that, you // can reference them anywhere in the entire stylesheet

// Sass variables begin the dollar ($) sign
$color-base: #2d5e8b;

.class1 { background-color: $color-base; }

// LESS variables are prepended with the @ sign
@color-base: #2d5e8b;

.class1{ background-color: @color-base; }


// Compiled CSS
.class1 { background-color: #2d5e8b; }

// Nesting // When we need to reference multiple elements with the same parent // Both Sass and LESS have the same syntax // & sign references the parent selector

section {
    margin: 10px;

    nav {
            height: 25px;

        a {
            color: #0982C1;

            &:hover { text-decoration: underline; }
          }
    }
}

// Compiled CSS
section { margin: 10px;}

section nav { height: 25px; }

section nav a { color: #0982C1; }

section nav a:hover { text-decoration: underline; }

// Mixins // Functions that allow the re-use of properties throughout a stylesheet

/* Sass */
@mixin error($borderWidth: 2px) {
  border: $borderWidth solid #F00;
  color: #F00;
}

.generic-error {
  padding: 20px;
  margin: 4px;
  @include error(); /* uses default $borderWidth of 2px */
}

.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  @include error(5px); /* Overrides default $borderWidth */
}

/* LESS */
.error(@borderWidth: 2px) {
  border: @borderWidth solid #F00;
  color: #F00;
}

.generic-error {
  padding: 20px;
  margin: 4px;
  .error(); /* uses default $borderWidth of 2px */
}

.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  .error(5px); /* Overrides default $borderWidth */
}

// Compiled CSS
.generic-error {
    padding: 20px;
    margin: 4px;
    border: 2px solid #f00;
    color: #f00;
}

.login-error {
    left: 12px;
    position: absolute;
    top: 20px;
    border: 5px solid #f00;
    color: #f00;
}

// LESS
// how to draw rounds in CSS? and make it work for many browsers
// You just have to set a very high CSS3 border-radius value. 
// http://verekia.com/less-css/dont-read-less-css-tutorial-highly-addictive
.round{
   -webkit-border-radius:9999px;
      -moz-border-radius:9999px;
           border-radius:9999px;  
}

#shape1{ .round; }

// Inheritance // Ability for other CSS selectors to inherit the properties of another selector.

// Sass
.block {
  margin: 10px 5px;
  padding: 2px;
}

p {
  @extend .block; /* Inherit styles from '.block' */
  border: 1px solid #EEE;
}

ul, ol {
  @extend .block; /* Inherit styles from '.block' */
  color: #333;
  text-transform: uppercase;
}

// Compiled CSS
.block, p, ul, ol {
  margin: 10px 5px;
  padding: 2px;
}

p { border: 1px solid #EEE; }

ul, ol {
  color: #333;
  text-transform: uppercase;
}

// LESS - doesn't truly support inheritance
// Treats inheritance like a mixin without parameters 
// and imports the styles into their own selectors

.block {
  margin: 10px 5px;
  padding: 2px;
}

p {
  .block; /* Inherit styles from '.block' */
  border: 1px solid #EEE;
}

ul, ol {
  .block; /* Inherit styles from '.block' */
  color: #333;
  text-transform: uppercase;
}

// Compiled CSS
.block {
  margin: 10px 5px;
  padding: 2px;
}

p {
  margin: 10px 5px;
  padding: 2px;
  border: 1px solid #EEE;
}

ul, ol {
  margin: 10px 5px;
  padding: 2px;
  color: #333;
  text-transform: uppercase;
}

// Conditionals

// Sass
@if lightness($color) > 30% {
    background-color: black;
}
@else {
    background-color: white;
}

// LESS uses mixin guards and pattern-matching. .lightswitch (@color) when (lightness(@color) > 30%) { background-color: black; }

.lightswitch (@color) when (lightness(@color) =< 30%) { background-color: white; }

// Importing - Makes creating separate files for organization worthwhile // Includes the import file into current file thereby // creating only one file

Sass: The @import Directive Getting Started with SASS (with Interactive Examples)

// Both Sass and LESS use the same format

/* file.Scss or file.less */
body { background: #EEE; }


@import "file.less"; // @import "file.scss"

p { background: #0982C1; }

// Compiled CSS
body { background: #EEE; }
p { background: #0982C1; }

// Color Functions // Built functions that transform a color upon compilation

// Examples
// Sass lighten($color, 10%); /* returns a color 10% lighter than $color / darken($color, 10%); / returns a color 10% darker than $color */

saturate($color, 10%);   /* returns a color 10% more saturated than $color */
desaturate($color, 10%); /* returns a color 10% less saturated than $color */

grayscale($color);  /* returns grayscale of $color */
complement($color); /* returns complement color of $color */
invert($color);     /* returns inverted color of $color */

mix($color1, $color2, 50%); /* mix $color1 with $color2 with a weight of 50% */

// LESS
lighten(@color, 10%); /* returns a color 10% lighter than @color */
darken(@color, 10%);  /* returns a color 10% darker than @color */

saturate(@color, 10%);   /* returns a color 10% more saturated than @color */
desaturate(@color, 10%); /* returns a color 10% less saturated than @color */

spin(@color, 10);  /* returns a color with a 10 degree larger in hue than @color */
spin(@color, -10); /* returns a color with a 10 degree smaller hue than @color */

mix(@color1, @color2); /* return a mix of @color1 and @color2 */

// How to use
@color: #0982C1;

h1 {
  background: @color;
  border: 3px solid darken(@color, 50%);
}

// Operations // Supported by both body { margin: (14px/2); top: 50px + 100px; right: 100px - 50px; left: 10 * 10; }

// Comments - double-slash comments gets removed after compilation

// Practical Examples

// 3D Text
//Sass
@mixin text3d($color) {
    color: $color;
    text-shadow: 1px 1px 0px darken($color, 5%),
           2px 2px 0px darken($color, 10%),
           3px 3px 0px darken($color, 15%),
           4px 4px 0px darken($color, 20%),
           4px 4px 2px #000;
}

h1 {
  font-size: 32pt;
  @include text3d(#0982c1);
}

// LESS 
.text3d(@color) {
    color: @color;
    text-shadow: 1px 1px 0px darken(@color, 5%),
               2px 2px 0px darken(@color, 10%),
               3px 3px 0px darken(@color, 15%),
               4px 4px 0px darken(@color, 20%),
               4px 4px 2px #000;
}

span {
    font-size: 32pt;
    .text3d(#0982c1);
}

References http://code.tutsplus.com/tutorials/sass-vs-less-vs-stylus-a-preprocessor-shootout--net-24320