Question

这是我的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.

所以一切似乎都很好......

Answer 1

grunt sass使用不依赖于ruby gems的libsass，因此编译速度更快，但在使用outputStyle压缩编译时，媒体查询存在此问题。您可以将outputStyle更改为nested，这样就可以了。

我知道这对生产网站来说并不好！您可以使用grunt contrib sass，因为这在压缩时可以与媒体查询一起使用，但是编译包含许多包含的大型scss文件将非常慢，因为它在ruby gems上运行。

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

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

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

Answer 2

这篇文章给了我提示：

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

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

我没有编译我的媒体指令

2 个答案: