gpt4 book ai didi

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

转载 作者:技术小花猫 更新时间:2023-10-29 11:10:35 33 4
gpt4 key购买 nike

<分区>

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

33 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com