Can I set a Sass variable inside a breakpoint?

Question

Is it possible to set the value of a variable once, inside a single sass-breakpoint, rather than each time I use the variable?

In other words, I'd like to do this:

$tab: 600px;
$wp: 100%;

@include breakpoint($tab) {
    $wp: 95%;
}

.alpha {
    // ...
    width: $wp;
}

.beta {
    // ...
    width: $wp;
}

.gamma {
    // ...
    width: $wp;
}

... rather than this:

$tab: 600px;
$wp: 100%;
$wp-tab: 95%;

.alpha {
    // ...
    width: $wp;
    @include breakpoint($tab) {
        width: $wp-tab;
    }
}

.beta {
    // ...
    width: $wp;
    @include breakpoint($tab) {
        width: $wp-tab;
    }
}

.gamma {
    // ...
    width: $wp;
    @include breakpoint($tab) {
        width: $wp-tab;
    }
}

I don't think the first approach will work as is. Is there another way to achieve the same result? Is this approach a bad idea?

Answer 1

That is not possible.

Quoting nex3, the developer of Sass:

While this would be pretty cool, it's very much contrary to the existing semantics of a Sass stylesheet. What you've outlined already has a meaning: it sets the variable twice in sequence and then accesses it (modulo some scoping issues). The sequential and largely imperative nature of Sass means that the sort of automatic duplication of rules you're describing becomes very complex. We actually considered something very similar for handling SassScript &, and ended up realizing that it was effectively impossible to do so and preserve the existing semantics.

The best approximation you can do right now is to put the styles that need to vary in a mixin with parameters and include that in your media queries.

Source: https://github.com/nex3/sass/issues/1227