如何在CSS 3媒体查询中使用SASS逻辑

我通过compass框架和blueprint/grid依赖关系使用saas。我希望能够使用媒体查询设置列的宽度，如下所示：

// /src/partials/_base.scss
$blueprint-grid-columns: 18;

@media screen and (max-width: 1024px){
    // If screen res is 1024 or lower, then set grid width to 46px
    $blueprint-grid-width: 46px;
}
@media screen and (max-width: 1280px){
    $blueprint-grid-width: 50px;
}
@media screen and (max-width: 1600px){
    $blueprint-grid-width: 76px;
}

$blueprint-grid-margin: 8px;

这将编译为in/stylesheets/screen.css：

@media screen and (max-width: 1024px) {}
@media screen and (max-width: 1280px) {}
@media screen and (max-width: 1600px) {}

但是screen.css其余部分中的值没有相应地设置。我想这是有道理的，因为$blueprint grid width变量是在编译时读取的，而不是在运行时读取的

有没有一种方法可以通过使用媒体查询获得屏幕分辨率来输出具有不同网格宽度的布局

相关github问题：

---

我正试图找出同样的问题，但似乎没有一个好办法让它按我希望的方式工作。正如您所说，变量是在编译时设置的，而不是在运行时设置的，因此很难理解。我认为您可以这样做：

@media screen and (max-width: 1024px) {
    $blueprint-grid-width: 46px;
    @import 'blueprint';
    // do everything else you need to with this size
}

---

但接下来，您必须对要运行的每个媒体查询执行同样的、蛮力式的蓝图重置。

这是SASS中的一个错误。从3.1.0版开始已修复：

---

当我尝试得到错误：error src/screen.scss（第3行：导入指令只能在文档的根目录下使用）。到目前为止，我能想到的唯一解决方案是编译3个单独的样式表-每个屏幕分辨率1个。然后将输出css复制并粘贴到媒体查询中的样式表中。不过这很糟糕。如果我对ruby更熟练，我会定制编译器，将三个样式表合并到一个样式表中。我自己也在尝试这样做，但仍然无法理解。您能指出变更日志的哪一部分明确引用了此修复程序吗？谢谢看看上面写着：@import现在可以在CSS或媒体规则中使用。导入的文件将被视为嵌套在规则中。不能在嵌套上下文中导入包含mixin的文件。以下是我现在如何操作的链接：