如何在CSS 3媒体查询中使用SASS逻辑 [英] How to use SASS logic within a CSS 3 media query

问题描述

我通过罗盘框架和蓝图/网格依赖使用saas。我希望能够使用媒体查询来设置列的宽度，例如：

I'm using saas via the compass framework and the blueprint/grid dependency. I want to be able to set the width of a column using a media query, like so:

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

This compiles to 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变量是在编译时读取，而不是运行时间。

But the values in the rest of screen.css are not set accordingly. I guess that makes sense, since the $blueprint-grid-width variable is read at compile time, not run time.

有一种方法来输出一个布局与不同网格宽度通过使用媒体查询获得屏幕分辨率？

Is there a way to output a layout with different grid widths by using a media query to get screen resolution?

相关github问题：

https://github.com/chriseppstein/compass/issues/302

Related github issue:
https://github.com/chriseppstein/compass/issues/302

推荐答案

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

This was a bug in SASS. It's been fixed as of version 3.1.0:

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

这篇关于如何在CSS 3媒体查询中使用SASS逻辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！