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

我正在通过指南针框架和蓝图/网格依赖关系使用saas。我希望能够通过媒体查询来设置列的宽度，像这样：如何在CSS 3媒体查询中使用SASS逻辑

// /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

来源

2011-03-14 Adam

到目前为止，我能想到的唯一的解决办法是编译3个独立的样式表：它被固定为3.1.0版本。然后将输出的CSS复制并粘贴到媒体查询中的样式表中。虽然这很糟糕。 – Adam 2011-03-16 21:58:55

如果我对ruby更熟练，我会定制编译器将三个样式表放在一起。 – Adam 2011-03-16 21:59:39

这是SASS中的一个错误。每个屏幕的分辨率1 -

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

来源

2011-05-05 17:56:28 Adam

我试图自己做这件事，但仍然无法确定它出。您能否指出更改日志的哪个部分明确指向此修复？谢谢！ – sguha 2012-04-24 23:01:38

看看它在说什么：@import现在可以在CSS或媒体规则中使用。导入的文件将被视为嵌套在规则中。带有mixin的文件不能在嵌套的上下文中导入。以下是我现在如何做的链接：http://jsfiddle.net/9bdRp/ – Adam 2012-04-26 17:45:40

我试图找出同样的事情，但似乎不是一个很好的方式来得到这个工作，我希望它的方式。就像你说的，变量在编译时设置，而不是运行时，所以很难确定。我想你可以做这样的事情：

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

但你不得不这样做同样的，蛮力样的蓝图重置您想要运行的每个媒体查询。

来源

2011-03-16 21:23:12

当我尝试获取错误时：错误src/screen.scss（第3行：导入指令只能在文档的根目录中使用）。 – Adam 2011-03-16 21:57:26

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

回答

相关问题