Sass @at-root Rules

Last Updated:

Sass @at-root Rules

The @at-rule allows you to whether or not to target the root of the document instead of using the normal nesting.

Sass @at-root Rules using 'Without'

The following example's @at-root will target the root of the document.

Example

SASS TO CSS CONVERTER
@media print { .style { font-size: 17px; color: green; @at-root (without: media) { color: red; } } }

Syntax

@at-root <without: rules...> // or @at-root <with: rules...>

Sass @at-root Rules using 'With'

Example

The following example's @at-root will target its parent @media.

SASS TO CSS CONVERTER
@media print { .style { font-size: 17px; color: green; @at-root (with: media) { color: red; } } }

Share this Page

Meet the Author