如何将组合媒体查询从 css 转换为 sass？答案

【问题标题】：How do I turn a combined media query into sass from css?如何将组合媒体查询从 css 转换为 sass？
【发布时间】：2012-05-13 08:42:14
【问题描述】：

目前我有这个：

@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/logo@2x.png');
    -moz-background-size: 180px 32px;
    -o-background-size: 180px 32px;
    -webkit-background-size: 180px 32px;
    background-size: 180px 32px;
  }
}

查看 sass 文档，他们给出了单个媒体查询的示例，我想这会起作用，但是当我真的只需要一个时，我有 4 个媒体查询和重复的 css。

我尝试了 css2sass 转换器（只是想看看它的建议 http://css2sass.heroku.com/ ）它给了我这个：

@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/logo@2x.png')
    -moz-background-size: 180px 32px
    -o-background-size: 180px 32px
    -webkit-background-size: 180px 32px
    background-size: 180px 32px

这给了我一个错误：only screen and ": expected selector, was "(-o-min-device-..."

不知道从这里去哪里。

编辑

我想我总是可以将它放在一个单独的文件中，然后将媒体查询放在 html 中。

【问题讨论】：

标签： css sass media-queries

【解决方案1】：

这就是我现在最终解决的方法：

@mixin mobi-logo-fix
  h1.top-logo
    background-image: url('../img/logo@2x.png')
    -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

结果相同，它没有结合 css，但是 mixin 让我只有一个地方的代码。

【讨论】：