title: Changing variable value based on media query
body: <p>I'd like to use the same variable for different media queries. Something like this:</p>
  
  <pre><code>$avatar_size: 200px;
  
  @media (#{$tablet_size}) {
    $avatar_size: 150px;
  }
  @media (#{$mobile_size}) {
    $avatar_size: 100px;
  }
  </code></pre>
  
  <p>The objective is to be able to use this variable in multiple places, so I can just reference the variable and not have to throw in the media queries every time. Like so:</p>
  
  <pre><code>.font-awesome-icon {
    font-size: $avatar_size;
  }
  img {
    width: $avatar_size;
    height: $avatar_size;
  }
  .img-wrapper {
    height: $avatar_size;
  }
  </code></pre>
  
  <p>Any way to do this?</p>