7

我通过指南针框架和蓝图/网格依赖项使用 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;

这编译到 /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问题：
https ://github.com/chriseppstein/compass/issues/302

4

2 回答 2

5

这是 SASS 中的一个错误。自 3.1.0 版起已修复：

http://sass-lang.com/docs/yardoc/file.SASS_CHANGELOG.html#310

于 2011-05-05T17:56:28.157 回答
2

我试图弄清楚同样的事情，但似乎没有一个好方法可以让它按照我想要的方式工作。就像你说的，变量是在编译时设置的，而不是运行时设置的，所以很难计算。我认为你可以这样做：

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

但是，您必须为要运行的每个媒体查询执行同样的、蛮力的蓝图重置。

于 2011-03-16T21:23:12.110 回答