SASS @import 多个文件取决于屏幕大小答案

【问题标题】：SASS @import multiple files depending on screen sizeSASS @import 多个文件取决于屏幕大小
【发布时间】：2013-12-31 05:16:10
【问题描述】：

我的项目中有超过 20 个 .scss 表。

我想将它们放在“导入”表中，其中某些表仅根据屏幕宽度读取。

我在一个非 SASS 项目中使用了 imports.css，使用以下代码：

@import url('sheet-1.css');

@import url('sheet-2.css') screen and (min-width: 300px) and (max-width: 730px);

我在 imports.scss 文件中尝试过这个 - 但编译后的 imports.css 有错误提示：

Syntax error: Invalid CSS after \"sheet-2.css') \": expected selector or at-rule, was \"screen and (min...\"\A

这是错误的方法吗？ ..还是有解决办法？

【问题讨论】：

标签： css import sass media-queries

【解决方案1】：

当您使用url() 时，这显然是 Sass 解析器中的一个错误。你会想这样写：

@import 'sheet-1.css';
@import 'sheet-2.css' screen and (min-width: 300px) and (max-width: 730px);

这应该编译为（CSS 验证器说这是有效的）：

@import url(sheet-1.css);
@import 'sheet-2.css' screen and (min-width: 300px) and (max-width: 730px);

我已代表您提交了一份错误报告，您可以在此处进行跟踪：https://github.com/nex3/sass/issues/1042

不过，我建议您将这些文件转换为 Sass，以便将它们编译为单个 CSS 文件。所有浏览器都会下载所有链接的样式表，即使它们当前不满足媒体查询限制：

@import 'sheet-1'; // filename = _sheet-1.scss
@media screen and (min-width: 300px) and (max-width: 730px) {
    @import 'sheet-2'; // filename = _sheet-2.scss
}

【讨论】：

我能把结构弄直吗.. sass dir -- sheet1.scss sheet2.scss imports.scss（其中包含您上面更正的代码） css dir -- sheet1.css sheet2.css 导入。 css（由imports.scss编译）对吗？（抱歉这里的格式不对）
请修改您的问题，而不是尝试将代码放在评论中，这只会使这种方式难以阅读。我已经修改了我的答案，以显示使用 Sass 执行导入的首选方式。