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.

score 2 · Answer 1 · answered Feb 22 '12 at 20:19

2

The easiest would be to use a mixin and pass an argument.

@mixin divpadding($padding: 3em)
  padding: $padding

div
  +divpadding

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

answered Feb 22 '12 at 20:19

bookcasey

39,223
13
77
94

This is a more flexible solution – maxbeatty Feb 27 '12 at 00:57

score 1 · Accepted Answer · answered Feb 24 '12 at 20:03

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;
    }
}

*/

Variable interpolation inside of media queries with Compass/Sass

2 Answers2