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

发布于 2024-10-21 23:19:52 字数 924 浏览 2 评论 0原文

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

原文

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;

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) {}

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?

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

蓝海似她心 2024-10-28 23:19:52

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

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

回复收藏 0 原文

錯遇了你 2024-10-28 23:19:52

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

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

但是你必须为你想要运行的每个媒体查询做同样的、强力的蓝图重置。

I'm trying to figure out the same thing but there doesn't seem to be a good way to get this working the way I want it to. Like you said, the variables get set at compile time, not runtime so it's hard to figure. I think you could do something like this:

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

But then you'd have to do this same, brute force kind of reset of Blueprint for every media query you want to run.

回复收藏 0 原文

~没有更多了~