Sass 3.2: media queries with ratio values rendered incorrectly #484

artibella opened this Issue Aug 13, 2012 · 3 comments


None yet

3 participants


In a media query I am using -o-min-device-pixel-ratio: 3/2 as a part of the query. When parsed by Sass 3.2 the "3/2" value of the -o-min-device-pixel-ratio gets rendered as "3 / 2" (note the spaces). In combination with respond.js this causes wrong media queries to be applied to IE7 and IE8.


Sass code:

$mq-retina: "screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (-o-min-device-pixel-ratio: 3/2)"

  font-size: 3em
  background: red

  @media #{$mq-retina}
    font-size: 6em
    background: yellow

CSS output:

.foo {
  font-size: 3em;
  background: red; }
  @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-device-pixel-ratio: 2), screen and (-o-min-device-pixel-ratio: 3 / 2) {
    .foo {
      font-size: 6em;
      background: yellow; } }

Is this a bug or is there a way to prevent the addition of spaces in the media query value?


I can reproduce this.


I don't see a work-around.

nex3 commented Aug 16, 2012

This sounds like a bug with respond.js. The spec definitely allows whitespace there:

The value type is a positive (not zero or negative) followed by optional whitespace, followed by a solidus (‘/’), followed by optional whitespace, followed by a positive .

That's not to say we can't or won't preserve the original whitespace, just that the bug lies with respond.js and for Sass this is more of a feature request.

@nex3 nex3 added the Help Wanted label Aug 28, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment