sass-vs-less.md

Some examples borrowed from http://sass-lang.com/guide

Variables

// Less
@navy01: #114da5;
@navy02: #1956dd;

// Sass
$navy01: #114da5;
$navy02: #1956dd;

Mixins

// Less
.colored-border(@color) {
    border: 1px solid @color;
}

.box {
    .colored-border(blue);
}

// Sass
@mixin colored-border($color) {
    border: 1px solid $color;
}

.box { 
    @include colored-border(blue); // Explicit `include`
}

Extend/Inheritance

Extend lets you share a set of CSS properties; useful for keeping things DRY

// Less
.pasta {
  &:extend(._dinner);
}

// Sass
// OK:
.pasta {
  @extend ._dinner;
}

// BETTER with placeholders (%)
%dinner {
  background: 'red';
}

.pasta {
  @extend %dinner;
}

Breakpoints

// Less

.pizza {
  margin-top: 15px;
  
  @media @desktop {
    margin-top: 0;
  }
}

Assuming we have a Sass mixin like:

@mixin bp($point) {
    @media #{$point} {
        @content;
    }
}

// Sass
.pizza {
    margin-top: 15px;
    
    @include bp($breakpoint500) {
      margin-top: 0;
    }
}