Maintain Nested Sass Variables

I have come across a Splinter bug that I have given an attempt of solving myself. In doing so, I definitely have a better understanding of how Splinter is working, which has led me to think that this is instead a feature request.

Here is the problem:

When a variable is declared within a selector block in Sass, it is scoped to be used within all nested selector blocks.

e.g.

.foo {
    $this: 3;
    prop: $this;

    &--bar {
        prop: $this * 2;
    }
}

With standard Sass that would output:

.foo {
    prop: 3;
}

.foo--bar {
    prop: 6;
}

When Splinter is added to the build process however it half-renders the Sass. The output to the split manifest from the example above looks like this:

.foo {
    $this: 3;
    prop: $this;
}

.foo--bar {
    prop: $this * 2;
}

That output from Splinter results in a Sass error as the variable $this is no longer defined in .foo--bar.

For now, the work around is that all Sass variables have to be global variables. Not a bad thing, but scoped variables are really handy.

To me the solution would need to be that either the Sass nesting be maintained like the original code or the variables are stored and injected into the nested selectors when they are half-rendered by Splinter.

sparkbox / splinter

Maintain Nested Sass Variables #26