title: Set variable value based on screen size
body: <p>I'm using sass. I want to add button paddings depending on the screen size. My only requirement is to have button <code>padding: 8px 8px;</code> for small screens and button <code>padding: 5px  8px;</code> for large screens. This is how I planned to have my sass variables.</p>
  
  <pre><code>@media only screen and (min-width: 1200px) {
      $paddingvar: 8px;
  }
  
  @media only screen and (max-width: 1199px) {
      $paddingvar: 5px;
  }
  </code></pre>
  
  <p>The problem I'm having is, <code>$paddingvar</code> is undefined.</p>
  
  <p>NOTE: I'm calling this variable file as the first on the scss file</p>
  
  <pre><code>@import 'vars/_mediabased.scss'; /*$paddingvar is set here*/
  @import 'other/_other.scss'; /*$paddingvar is used here*/
  </code></pre>
  
  <p>How can I set get the padding variable to work?</p>