如何在 CSS 3 媒体查询中使用 SASS 逻辑 [重复]

Posted 2023-03-06

【中文标题】如何在 CSS 3 媒体查询中使用 SASS 逻辑 [重复]

【英文标题】：How to use SASS logic within a CSS 3 media query [duplicate]

【发布时间】：2011-07-15 10:12:43

【问题描述】：

我通过 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

【问题讨论】：

到目前为止，我能想到的唯一解决方案是编译 3 个单独的样式表 - 每个屏幕分辨率 1 个。然后将输出的 css 复制并粘贴到媒体查询中的样式表中。不过这很糟糕。

如果我对 ruby​​ 更熟练，我会定制编译器以将三个样式表合二为一。

【参考方案1】：

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

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

【讨论】：

我正在尝试自己执行此操作，但仍然无法弄清楚。您能否指出更改日志的哪一部分明确引用了此修复程序？谢谢！

看看它在哪里说：@import 现在可以在 CSS 或媒体规则中使用。导入的文件将被视为嵌套在规则中。带有 mixins 的文件可能无法在嵌套上下文中导入。这是我现在如何做的链接：jsfiddle.net/9bdRp

【参考方案2】：

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

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

但是，您必须对要运行的每个媒体查询都进行同样的暴力重置蓝图。

【讨论】：

当我尝试得到错误：error src/screen.scss（第 3 行：导入指令只能用于文档的根目录。）