この記事では、@at-rootの使い方を解説します。
@at-rootはネストして書いているセレクタを、親セレクタやメディアクエリを除外して、ルートの位置に戻すことができます。

これだけの説明では、よくわからないと思いますので、実際に書いてみましょう。

このSassをコンパイルしてみると、このようなCSSになります。

@at-rootをつけた「.element2」がネストの親である「.block」の外に出されていることがわかります。

複数のルールセットに@at-rootを使う

@at-rootは複数のルールセットに対しても使うことができます。

これをコンパイルすると、@at-rootで囲まれた、「.element2」と「.element3」の両方がネストの親の外に書き出されます。

メディアクエリの中で@at-rootを使う

@at-rootをメディアクエリのネストの中で使った場合は、メディアクエリの外ではなく、中に書き出されます。

このSassをコンパイルして、CSSにするとこのようになります。

では、@at-rootをつかってメディアクエリの外に書き出したいときにはどうすればよいでしょうか？

withoutオプション

@at-rootにはオプションがあります。そのひとつが（without）です。
@at-root(without: media)と書くことで、メディアクエリの外に書き出されます。

ただ、この場合、at-rootの対象がmediaだけになったので、親セレクタのネストは残ります。

親セレクタの外にも出したい場合は、@at-root(without:media rule)と書きます。

また、すべてのネストから外に出したい場合は、@at-root(without: all)と書くことで、すべてのルートに書き出すことができます。

withオプション

もうひとつのオプションが（with）です。
このオプションは（without）の逆で、指定したものだけが残り、それ以外が除外されます。

@at-root(with:media)と指定すると、メディアクエリだけが残り、親セレクタが除外されました。

@at-rootの機能はこのように、ネストから外に出して書き出すというものですが、この機能だけ見ても、どこに使うものなのかよくわからないと思います。
使い所としては、ミックスインなどと組み合わせて使う例などがありますが、普段のWeb制作では使わないかなという感覚です。
とりあえず、このような機能もあるのだと知っておいて、必要な時に思い出せるようにしておくといいでしょう。