# Fake closure to provide variable scoping in SASS

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?