参见英文答案 >
Using Sass Variables with CSS3 Media Queries4个
我通过罗盘框架和蓝图/网格依赖使用saas.我希望能够使用媒体查询设置列的宽度,如下所示：
我通过罗盘框架和蓝图/网格依赖使用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
解决方法
这是SASS中的一个错误.从版本3.1.0开始修复：
http://sass-lang.com/docs/yardoc/file.SASS_CHANGELOG.html#310
