At-Root Documentation Fix

Rewriting the section, as it was confusingly written. Mentioned in issue #1462 

````
It can either be used with a single inline selector:

    .parent {
      ...
      @at-root .child { ... }
    }

Which would produce:

    .parent { ... }
    .child { ... }

Or it can be used with a block containing multiple selectors:

    .parent {
      ...
      @at-root {
        .child1 { ... }
        .child2 { ... }
      }
      .step-child { ... }
    }

Which would output the following:

    .parent { ... }
    .child1 { ... }
    .child2 { ... }
    .parent .step-child { ... }

````