Advanced CSS questions answered.

This is from the excellent and well recommended Advanced Sass Team Treehouse course.

The following Sass uses the @at-root directive within a media query. Sass considered @media to be root, so how can you update this so that the .barselector is at the absolute root of the document?

.foo {

  @media (min-width: 400px) {

    display: flex;

    @at-root ( without: rule media ) {

      .bar {

        display: inline-block;

      }

    }

  }

}

In the following code challenge, we are hard-coding the name of the nested selector .foo-bar. How can we update this to inherit the parent selector of .foo?

.foo {

  @media (min-width: 400px) {

    display: flex;

    @at-root (without: media rule) {

      &-bar {

        display: inline-block;

      }

    }

  }

}