compass (scss) variables & media queries

Question

I'm trying to do something like this:

$arrow-size: 30px;

@media only screen and (max-width: 449px) {
  $arrow-size: 15px;
}

div.selector {
  height: 0px;
  width: 0px;
  position: absolute;
  bottom: 0px;
  left: 50%;
  border-bottom: $arrow-size solid white;
  border-left: $arrow-size solid transparent;
  border-right: $arrow-size solid transparent;
}

Unfortunately, $arrow-size does not change according to the media query (my arrow is always 15px, even if my window is wider than 449px).

Any idea ? Or am I taking the problem the wrong way ?

Answer 1

As an alternative, try using the power of em's:

$arrow-size: 1.875em; // 30px, use pxtoem.com for conversion

div.selector {
  height: 0px; width: 0px;
  position: absolute;
  bottom: 0px; left: 50%;
  border-bottom: $arrow-size solid white;
  border-left: $arrow-size solid transparent;
  border-right: $arrow-size solid transparent;
}

@media only screen and (max-width: 449px) {
  div.selector { font-size: 50%; }
}

Since the em is relative to the font-size, all you gotta do is play with that value to change the size of the arrow across different responsive states.