sass 没有编译我的媒体指令答案

【问题标题】：sass not compiling my media directivessass 没有编译我的媒体指令
【发布时间】：2014-12-23 04:07:55
【问题描述】：

这是我的 sass 文件：

@import 'reset';
@import 'page';
@import 'colors';
@import 'typography';

$screen-xs:                  480px !default;
$screen-xs-min:              $screen-xs !default;
//there are more of these for each screen size: sm, md, lg

@media (min-width: $screen-xs-min) {
  .thumbnail img { 
    height:64px !important;
  }
}
//there are more of these @media queries, for each screen-<size>-min one

除了所有的@media 查询都编译为空的{} 块之外，所有似乎都编译得很好。编译文件摘录：

h1.bottom{font-weight:bold;color:#03bbc1;margin-top:-8px !important}@media (min-width: 480px){}@media (min-width: 768px){}@media (min-width: 992px){}@media (min-width: 1200px){}

我做错了什么？

使用 nodejs 和 grunt 编译 scss 文件。当我更改文件时，grunt 会报告以下内容：

>> File "sass/styles.scss" changed.
Running "sass:dist" (sass) task
File public/css/styles.css created.
File public/css/styles.css.map created.

Done, without errors.

所以一切看起来都很好......

【问题讨论】：

你的代码没有问题，你的编译器有问题：sassmeister.com/gist/4a1bf577ac941209d925
好的，我明白了...感谢您指出这一点！

标签： node.js sass gruntjs

【解决方案1】：

grunt sass 使用不依赖于 ruby gems 的 libsass，因此它可以更快地编译，但是在使用压缩的 outputStyle 进行编译时，媒体查询会出现这个问题。您可以将outputStyle 更改为nested，它会起作用。

我知道这对生产站点不利！您可以使用 grunt contrib sass，因为它在压缩时确实适用于媒体查询，但是在 ruby gem 上运行时编译包含许多包含的大型 scss 文件会非常慢。

我尝试过使用 grunt sass 将 sass 编译为嵌套，然后使用 grunt cssmin 任务来缩小嵌套输出。但这似乎有问题，在这个阶段我看不出它可能是什么丑陋的 css。

如果您找到更好的方法，请回帖。

更新，发现这个：https://github.com/sindresorhus/grunt-sass/issues/152

【讨论】：

这与提出的问题完全无关。
我想你会发现它与它有关。如果您真的阅读了我发布链接的 git hub 问题，您会发现问题有解决方案，并且我所写的所有内容也作为原始发帖人所问问题的症状进行了讨论。 :D 请为我的解决方案投票。

【解决方案2】：

这篇文章给了我提示：

http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32

基本上在类中创建媒体查询，而不是相反

【讨论】：