Интерполяция переменных внутри медиа-запросов с помощью Compass/Sass

Мне было интересно, есть ли способ добиться следующего вывода в 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;
    }
}

*/​

Есть ли способ сделать это? По сути, заставить Sass автоматически компилировать все свойства, которые имеют переменную в качестве значения, автоматически в рамках медиа-запроса, когда эта переменная изменяется.


css sass compass-sass
person Community    schedule 22.02.2012    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Проще всего было бы использовать миксин и передать аргумент.

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

div
  +divpadding

@media screen and (max-width: 780px)
  div
    +divpadding(2em)
person bookcasey    schedule 22.02.2012
comment
Это более гибкое решение - person maxbeatty; 27.02.2012

arrow_upward
1
arrow_downward

Вот как я этого добился в итоге. Использование миксинов.

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

*/​
person Community    schedule 24.02.2012