<===> input.scss
// Range syntax that's generated by interpolation is allowed. This falls out of
// the general property that CSS media features are parsed as
// <declaration-value>s.

@media #{"(100px < width < 500px)"} {a {interpolation: total}}
@media (#{"100px < width < 500px"}) {a {interpolation: in-parens}}
@media (#{"100px < width"} < 500px) {a {interpolation: left}}
@media (100px < #{"width < 500px"}) {a {interpolation: right}}

<===> output.css
@media (100px < width < 500px) {
  a {
    interpolation: total;
  }
}

@media (100px < width < 500px) {
  a {
    interpolation: in-parens;
  }
}

@media (100px < width < 500px) {
  a {
    interpolation: left;
  }
}

@media (100px < width < 500px) {
  a {
    interpolation: right;
  }
}