Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

/* Modular syntax using the 3.3 at-root syntax. */
.Component {
  border: 1px;

  @at-root #{&}-child {
    color: blue;
  }
}

// ...which is way too verbose.

// Let's take a look at the ampersand:

// This...

/* Basic nesting */
.outer {
  border: 1px;

  .nested {
    color: blue;
  }
}

// ...is basically just a shortcut for this...

/* Basic nesting with an explicit ampersand */
.outer {
  border: 1px;

  & .nested {
    color: blue;
  }
}

// I can chain by removing the space:

/* Chained classes */
.box {
  display: block;

  &.red {
    background: red;
  }
}

// So is there a good reason for them not to support modular
// syntax by just allowing me to chain like this:

//  .Component {
//    border: 1px;
//  
//    &-child {
//      color: blue;
//    }
//  }

// (Commented out since it's a syntax error.)

// It's incredibly terse and makes the new syntax match
// what developers are already accustomed to doing to
// chain things together.

// My question is, why do they care what character appears
// immediately after the ampersand? Why not just let it
// blindly chain?

SassMeister-output.css

/* Modular syntax using the 3.3 at-root syntax. */
.Component {
  border: 1px;
}
.Component-child {
  color: blue;
}

/* Basic nesting */
.outer {
  border: 1px;
}
.outer .nested {
  color: blue;
}

/* Basic nesting with an explicit ampersand */
.outer {
  border: 1px;
}
.outer .nested {
  color: blue;
}

/* Chained classes */
.box {
  display: block;
}
.box.red {
  background: red;
}