CODEWITHSUNDEEP
csssassmedia-queries
SeanJA
SeanJA

Reputation: 10344

How do I turn a combined media query into sass from css?

Currently I have this:

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
  h1.top-logo{
    background-image: url('../img/[email protected]');
    -moz-background-size: 180px 32px;
    -o-background-size: 180px 32px;
    -webkit-background-size: 180px 32px;
    background-size: 180px 32px;
  }
}

Looking at the sass documentation, they give examples for single media queries, which... I guess would work, but then I have 4 media queries and duplicate css when I really only need one.

I tried the css2sass converter (just to see what it suggested http://css2sass.heroku.com/ ) and it gave me this:

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5)
  h1.top-logo
    background-image: url('../img/[email protected]')
    -moz-background-size: 180px 32px
    -o-background-size: 180px 32px
    -webkit-background-size: 180px 32px
    background-size: 180px 32px

which gives me an error: only screen and ": expected selector, was "(-o-min-device-..."

Not sure where to go from here.

edit

I guess I could always put it in a separate file and have the media query in the html instead.

Upvotes: 0

Views: 296

Answers (1)

SeanJA
SeanJA

Reputation: 10344

This is how I ended up solving it for now:

@mixin mobi-logo-fix
  h1.top-logo
    background-image: url('../img/[email protected]')
    -moz-background-size: 180px 32px
    -o-background-size: 180px 32px
    -webkit-background-size: 180px 32px
    background-size: 180px 32px


@media only screen and (-webkit-min-device-pixel-ratio: 1.5)
  @include mobi-logo-fix
@media only screen and (-o-min-device-pixel-ratio: 3/2)
  @include mobi-logo-fix
@media only screen and (min--moz-device-pixel-ratio: 1.5)
  @include mobi-logo-fix
@media only screen and (min-device-pixel-ratio: 1.5)
  @include mobi-logo-fix

Which has the same result, it doesn't combine the css, but the mixin lets me only have the code in one spot.

Upvotes: 2

Related Questions