Set variable value based on screen size

I’m using sass. I want to add button paddings depending on the screen size. My only requirement is to have button padding: 8px 8px; for small screens and button padding: 5px 8px; for large screens. This is how I planned to have my sass variables.

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

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

The problem I’m having is, $paddingvar is undefined.

NOTE: I’m calling this variable file as the first on the scss file

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

How can I set get the padding variable to work?

Source: css3

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.