Limiting variable scope without nesting into a subclass or mixin?

Question

I would like to use a variable in a couple of classes, so i do:

$height: 100px

#foo
  height: $height

#bar
  height: $height

But this pollutes the global variable scope, so i would like to use a subscope.

When i have a common container for the elements, it's simple:

#common-container
  $height: 100px

  #foo
    height: $height

  #bar
    height: $height

But instead of polluting to global variable scope, this approach pollutes to resulting CSS: chained selectors are absolutely unnecessary. In some cases there's just no common container for the elements, so this approach is not an option at all.

I tried working around this issue by using a dummy mixin:

=local-scope
  @content

It seems to work fine:

+local-scope
  $foo: foo

@warn $foo // -> Error: Undefined variable: "$font-size".

But if a variable is declared before using the mixin, it gets overwritten! :(

$foo: foo

+local-scope
  $foo: bar

@warn $foo // -> bar

The question is: how do i limit a variable scope correctly without messing with the global namespace and without unnecessarily chaining selectors?

Answer 1

While this prevents inline @imports, I think that's a dark pattern anyway, as it secretly encourages complex specificity.

@at-root {
  $this: that;  // not a global variable

  .your-original-css {
    // rules
  }
}