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

Question

Мне было интересно, есть ли способ получить следующий результат в 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 для компиляции всех свойств, имеющих переменную как их значение, автоматически в рамках медиа-запроса при изменении этой переменной.

Answer 1

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

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

*/​ 

Answer 2

Самый простой способ - использовать mixin и передать аргумент.

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

div 
    +divpadding 

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