不适用 SCSS 的媒体查询答案

【问题标题】：Media Queries with SCSS not applying不适用 SCSS 的媒体查询
【发布时间】：2012-11-27 23:40:47
【问题描述】：

我正在尝试在 Chrome 和 Firefox 中测试以下代码，但都没有成功。我已将它添加到样式表的末尾，无论如何它都可以正常工作。

@media all and (max-width : 850px) {
  h1#site-name {
    width: 100%;
    a {
      margin: auto;  
    }
  }

  nav#main-menu {
    float: left;
  }
}

我正在重新调整浏览器窗口的大小，而这些更改显然不会在任何宽度上生效。该代码位于 .scss 文件中以供参考。

有什么想法吗？

【问题讨论】：

你确定你已经正确地将你的 scss 编译成 css 了吗？
我正在使用 Sasson 的 Drupal 主题。不明白为什么它无法处理
@ 在 SASS 中是有问题的，因为它用于 mixins。在某些版本中，此代码将引发错误，因为它假定此处有一个 mixin 声明。我首先在 JSFiddle 上注意到了这个问题。据我记得，这个冲突已在较新的版本中得到修复。

标签： css media-queries sass

【解决方案1】：

您也可以在 scss 中使用 mixins 进行媒体查询。

@mixin mq($mq) {
    @if $mq == medium {
        @media (max-width: 850px) { @content; }
    }
}

#main-menu {
    // default styles

    // media query 850px max-width
    @include mq(medium) {
        float: left;
    }
}

查看这篇文章了解更多信息。http://css-tricks.com/media-queries-sass-3-2-and-codekit/

【讨论】：