Variable interpolation inside of media queries with Compass/Sass

Question

I was wondering if there is a way to achieve the following output in Compass/Sass?

$padding: 3em

div {
    padding: $padding;
}

@media screen and (max-width: 780px) {
    $padding: 2em;
}

/* outputs:

div {
    padding: 3em;
}

@media screen and (max-width: 780px) {
    div {
        padding: 2em;
    }
}

*/​

Is there any way of doing this? Basically getting Sass to compile all properties which have a variable as their value automatically within the scope of a media query when that variable is changed.

Answer 1

Here's how I achieved it in the end. Using mixins.

+padding($padding: 3em)
    div {
        padding: $padding;
    }

+padding

@media screen and (max-width: 780px)
    +padding(2em)

/* outputs:

div {
    padding: 3em;
}

@media screen and (max-width: 780px) {
    div {
        padding: 2em;
    }
}

*/​