Установить значение переменной на основе размера экрана

Question

Я использую sass. Я хочу добавить кнопки paddings в зависимости от размера экрана. Мое единственное требование - иметь кнопку padding: 8px 8px; для небольших экранов и кнопку padding: 5px 8px; для больших экранов. Вот как я планировал использовать переменные sass.

@media only screen and (min-width: 1200px) { 
    $paddingvar: 8px; 
} 

@media only screen and (max-width: 1199px) { 
    $paddingvar: 5px; 
} 

Проблема у меня есть, $paddingvar не определен.

Примечание: Я звоню этот переменный файл в качестве первого в файле SCSS

@import 'vars/_mediabased.scss'; /*$paddingvar is set here*/ 
@import 'other/_other.scss'; /*$paddingvar is used here*/ 

Как я могу установить получить переменную набивку на работу?

Answer 1

К сожалению, вы не можете установить переменную внутри медиа-запроса. Вы можете определить переменные перед запросами средств массовой информации и использовать, как показано ниже:

/** 
* vars/_mediabased.scss 
*/ 
$padding: 5px 8px; 
$paddingtouch: 8px; 


/** 
* other/_other.scss 
*/ 
button { 
    @media only screen and (min-width: 1200px) { 
    padding: $padding; 
    } 
    @media only screen and (max-width: 1199px) { 
    padding: $paddingtouch; 
    } 
}