[joesb]

It's longer for the simple case, declaring and calling a function once is also always longer than simply inline the code.

Nesting rules allow you to turn

  .foo p {
  }
  .foo p a {
  }
  .foo p div {
  }

into

  .foo {
     p {
        a {
        }
        div {
        }
     }
  }

Less duplicate code and more obvious hierarchy.

'&' context reference allows you to turn this.

  .widget a.button { ... }
  .widget a.button:hover { ... }
  .widget a.button:active, .widget a.button:focus { ... }

Into

  .widget a.button {
    ...
    &:hover { ... }
    &:focus, &:active { ... }
  }

Again, less duplication, less code to read/change. More obvious hierarchy.

@includes is like writing function. Which is very useful when you have to write browser-specific style. You can define `round-border` mixin once.

  @mixin round-border($radius) {
     border-radius: $radius;
     -moz-border-radius: $radius;
     -webkit-border-radius: $radius;
  }

  .dialog { 
    @include round-border(10px);
  }
  
  .color-picker { 
    @include round-border(5px);
  }

  .button { 
    @include round-border(3px);
    ...
  }

Is that less clear or harder to maintain than CSS version?