1
\$\begingroup\$

For some time I've wanted a way to provide private scope to variables, functions, etc. that needed to be used across multiple separate selections. As far as I'm aware there is no official solution for providing scope in this manner. However, it occurred to me that @at-root could help with this.

This isn't probably the most practical example, but let's say we wanted to create classes that would remove padding, borders, outlines, and margins.

$prefix: '.no'

#{$prefix}-outline
    outline: none

@each $region in margin, border, padding
    #{$prefix}-#{$region}
        #{$region}: 0 !important

    @each $position in top, right, bottom, left
        #{$prefix}-#{$region}-#{$position}
            #{$region}-#{$position}: 0 !important

The problem with this example is that $prefix will pollute the global scope. We could avoid this by nesting everything under @at-root.

@at-root
    $prefix: '.no'

    #{$prefix}-outline
        outline: none

    @each $region in margin, border, padding
        #{$prefix}-#{$region}
            #{$region}: 0 !important

        @each $position in top, right, bottom, left
            #{$prefix}-#{$region}-#{$position}
                #{$region}-#{$position}: 0 !important

What opinions are there about using @at-root in this manner? Is there a better way to accomplish this?

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.