example.sass

@import compass/css3

$color-light: #fff
$color-grey: #ddd
$color-dark: #000

//--------------------------------------------------------------------------------

// I started out like this, getting all
// carried away with how awesome Sass
// is, and how it allows nesting.
.foo
  +linear-gradient(color-stops($color-light, $color-grey))
  color: $color-dark
  .bar
    border:
      width: 1px
      style: solid
      color: $color-dark
  .baz
    padding: 20px
    &.blah
      padding:
        top: 10px

//--------------------------------------------------------------------------------

// But after awhile, that can become a
// maintenance nightmare. So I refactored
// the Sass code to look more akin to
// the actual compiled CSS it exports.
.foo
  +linear-gradient(color-stops($color-light, $color-grey))
  color: $color-dark

.foo .bar
  border: 1px solid $color-dark

.foo .baz
  padding: 20px

.foo .baz.blah
  padding-top: 10px

//--------------------------------------------------------------------------------

// A little compromise...

.foo
  +linear-gradient(color-stops($color-light, $color-grey))
  color: $color-dark
  .bar
     border: 1px solid $color-dark
  .baz
    padding: 20px
    &.blah
      padding-top: 10px

//--------------------------------------------------------------------------------

// Both above examples basically are
// compiled down into CSS like this...
.foo {
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #dddddd));
  background-image: -moz-linear-gradient(top, #ffffff, #dddddd);
  background-image: linear-gradient(top, #ffffff, #dddddd);
  color: #000;
}

.foo .bar {
  border: 1px solid #000;
}

.foo .baz {
  padding: 20px;
}

.foo .baz.blah {
  padding-top: 10px;
}