Expressions do not work in media queries

[matharden]

The following code should evaluate the variable expression

$breakpoint: 500px;

@media (max-width: $breakpoint - 1) {
  main {
    color: red;
  }
}

to output this CSS…

@media (max-width: 499px) {
  main {
    color: red;
  }
}

but instead results in the following invalid CSS…

@media (max-width: $breakpoint - 1) {
  main {
    color: red;
  }
}

My current work-around is to use interpolation…

@media (max-width: #{$breakpoint - 1}) {
  main {
    color: red;
  }
}