Set variable value based on screen size

Question

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?

I'm not sure that this is possible. SASS is a compiled language so, any variables, mixins, etc. are compiled into CSS before run time. Or am I missing something ? — Pat Dobson, Jun 18 '15 at 08:33

Dan Hayden · Accepted Answer · 2015-06-18T08:51:14.970

Unfortunately you can not set a variable inside a media query. You could define the variables before the media queries and use as shown below:

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

Set variable value based on screen size

1 Answers1