Sassで&を使ってネストするなら@at-rootを書かなくてもいい

@at-rootを使うとこのようにネストを解除できます。

input.scss

.foo {
  color: red;

  @at-root .bar {
    color: blue;
  }

}

output.css

.foo {
  color: red;
}

.bar {
  color: blue;
}

しかし、&で名前を持って来たりするときには@at-rootを書く必要はありません。

input.scss

.foo {
  color: red;

  &-bar {
    color: blue;

    &-baz {
      color: green;
    }

  }

}

output.css

.foo {
  color: red;
}

.foo-bar {
  color: blue;
}

.foo-bar-baz {
  color: green;
}

これはBEM記法などでとても役に立ちます(僕はつい先日までいちいち@at-rootを書いてしまっていました)。

ちなみに、インターポレーション(#{})を使うとネストされるようです。

input.scss

.foo {
  color: red;

  #{&}-bar {
    color: blue;
  }

}

output.css

.foo {
  color: red;
}

.foo .foo-bar {
  color: blue;
}