Advanced Sass usage of parent selector (&)

parent-selectors.scss

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

//improved ampersands

div{
  background: green;
  & & {
    color: blue;
  }
  & + & {
    text-align: right;
  }
}

//can use for more complex functions as well
.my-widget {
  //my widget is normaly red
  color: red;
  @at-root {
    //but with the below #{&}, div.my-widget will be green
    div#{&} {
      color:green;
    }
  }
}

sass-parent-selector.css

div {
  background: green;
}
div div {
  color: blue;
}
div + div {
  text-align: right;
}

.my-widget {
  color: red;
}
div.my-widget {
  color: green;
}