1. VARIABLES
2. NESTED SELECTORS
3. MIXINS
4. DYNAMIC MIXINS (with Arguments)
5. SELECTOR INHERITANCE
6. COLOR FUNCTIONS
7. HANDLING WITH NUMBERS
8. FUNCTIONS & LOOP CONDITIONALS
9. MEDIA QUERIES
10. NAMESPACES
11. SERVER SIDE IMPORTS
12. OUTPUT FORMATTING
13. COMMENTS

Note: The following SASS Examples below are shown in .SCSS Syntax

SASS USES: $

LESS USES: @

Sass                     | Less
-------------------------+-----------------
$colorPrimary: #333;     | @colorPrimary: #333;
$siteWidth: 960px;       | @siteWidth: 960px;  
                         |
body {                   | body {
  color: $colorPrimary;  |   color: @colorPrimary;
  width: $siteWidth;     |   width: @siteWidth;
}                        | }

SCOPING NOTE:

Atm SASS is using the global scoping only. Less is designed of scoping by default and uses global and local variables. In future updates of SASS you will be able to change the scoping with special declarations.

EXAMPLE:

Sass                                     | Less
-----------------------------------------+-----------------
$color: black;                           |  @color: black;
                                         |
.scoped {                                |  .scoped {  
  $color: white;                         |    @color: white;
  color: $color;                         |    color: @color;
}                                        |  }  
                                         |
.unscoped {                              |  .unscoped {
  //SASS = white (overwritten by local)  |   // LESS = black (global)
  color: $color;                         |   color: @color;
}                                        |  }

The example below shows that there is no difference in nesting.

  Sass             | Less
-------------------+-----------------
p {                | p {
  a {              |   a {
    color: red;    |     color: red;
    &:hover {      |     &:hover {
      color: blue; |       color: blue;
    }              |     }
  }                |   }
}                  | }

Sass                              | Less
----------------------------------+----------------------------------
@mixin bordered {                 | .bordered() {
  border-top: dotted 1px black;   |   border-top: dotted 1px black;
  border-bottom: solid 2px black; |   border-bottom: solid 2px black;
}                                 | }
                                  | 
#menu a {                         | #menu a {
  @include bordered;              |   .bordered;
}     

Note:

A Class with an empty argument " () " will be used as mixin in LESS. That means that they will not be compiled into the .css if they are not in use. Advantage: It is also possible to use normal classes as mixins.

Sass                              | Less
----------------------------------+----------------------------------
@mixin bordered($width: 2px) {    | .bordered(@width: 2px) {
  border: $width solid black;     |   border: @width solid black;
}                                 | }
                                  | 
#menu a {                         | #menu a {
  @include bordered(4px);         |   .bordered(4px);
}                                 | }

Sass                        | Less (since 1.4.0)          | CSS Output
----------------------------+-----------------------------+---------------------------
.bordered {                 | .bordered {                 | .bordered, #menu a {
  border: 1px solid back;   |   border: 1px solid back;   |   border: 1px solid back;
}                           |  }                          |  }
                            |                             |
#menu a {                   | #menu a {                   |
  @extend .bordered;        |   &:extend(.bordered);      |
}                           | }                           |
                            |  // OR USE IT THIS WAY:     | 
                            | #menu a:extend(.bordered) { | 
                            | }

Note:

Both SASS & LESS provide similar color functions

See all in SASS

See all in LESS

Accessors:

• red($color)
• green($color)
• blue($color)
• hue($color)
• saturation($color)
• lightness($color)
• alpha($color)

Mutators:

• lighten($color, $amount)
• darken($color, $amount)
• saturate($color, $amount)
• desaturate($color, $amount)
• adjust-hue($color, $amount)
• opacify($color, $amount)
• transparentize($color, $amount)
• mix($color1, $color2[, $amount])
• grayscale($color)
• compliment($color)

Christ Eppstein said that SASS supports "supports unit-based arithmetic": Complex units are supported in any intermediate form and will only raise an error if you try to print out the value of a complex unit.

Sass will let you define your own units and will happily print out unknown units into your css. Less will not. Sass does this as a form of future proofing against changes in the w3c specification or in case a browser introduces a non-standard unit.

SASS:

1cm * 1em => 1 cm * em
2in * 3in => 6 in * in
(1cm / 1em) * 4em => 4cm
2in + 3cm + 2pc => 3.514in
3in / 2in => 1.5

LESS:

1cm * 1em => Error
2in * 3in => 6in
(1cm / 1em) * 4em => Error
2in + 3cm + 2pc => Error
3in / 2in => 1.5in	

SASS:

• @IF
• @ELSE IF
• @ELSE
• @THEN
• @FOR
• @WHILE

LESS:

• WHEN

Let's say we want to create a mixin function that makes the background-color depend from the font lightness of the font color:

Do it with SASS:

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

Do it with LESS:

.mixin (@color) when (lightness(@color) > 30%) {
  background-color: black;
}
.mixin (@color) when (lightness(@color) = 30%) {
  background-color: white;
}

$emotions: happy sad excited mustached;
@each $emotion in $emotions {
	.feeling-#{$emotion} {
	background-image:
	url("images/feeling-#{$emotion}");
	}
}	

SASS Loop Compiled to CSS:

.feeling-happy {
	background-image: url("images/feeling-happy");
}
.feeling-sad {
	background-image: url("images/feeling-sad");
}		
.feeling-excited {
	background-image: url("images/feeling-excited");
}	
.feeling-mustached {
	background-image: url("images/feeling-mustached");
}	

Note:

It is also possible to generate Loops with LESS but it's a little bit more complicated with the WHEN directive. Loops could be very useful if you have to generate a lot of code. It saves your time.

Note:

It's very useful to use variables for the naming of Media Query Breakpoints

SASS EXAMPLE (for LESS use the variables with an @:

$small-breakpoint: 480px;
$medium-breakpoint: 768px;
$large-breakpoint: 1024px;
div {
width: 100%;
@media screen and (min-width: $small-breakpoint) {
width: 100px;
display: inline-block;
}

@media screen and (min-width: $medium-breakpoint) {
width: 200px;	
}

@media screen and (min-width: $large-breakpoint) {
width: 400px;
}

}

With SASS you can do it more fancy with Control Directives:

@mixin respond-to($name){
	@if $name == small-screen {
		@media only screen and (min-width: 320px) {
			@content
		}
	}
	@if $name == large-screen {
		@media only screen and (min-width: 960px) {
			@content
		}
	}		
}

aside {
	width: 25%;
	@include respond-to(small-screen) {
		width: 100%;
	}	
}

Note: Let's do it similar with LESS:

Update by @helgri

@small-screen: ~"only screen and (min-width:320px)";
@large-screen: ~"only screen and (min-width:960px)";
aside{
width: 25%;
@media @small-screen {
width: 100%;
}
}

Note:

Less provides the feature of Namespaces that SASS can't do. The founder of SASS considered this feature and decided that adding it would create fragility and unexpected interconnectedness.

How to code Namespaces with LESS:

#bundle () {
  .red { background-color: red }
  .green { background-color: green }
}
.foo {
#bundle > .red;
}

In compiled CSS:

.foo {
  background-color: red;
}

SASS& LESS will @import other files. That's very useful because you can build your css modular, scalable and maintainable.

3 Outputs of LESS

• normal
• compressed
• yui-compressed

4 Outputs of SASS

• nested
• compact
• compressed
• expanded

Both Support C-Style (/* */) and C++ Style Comments (//)