css - SASS @import 根据屏幕尺寸导入多个文件

Question

我的元素中有超过 20 个 .scss 表。

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

我在一个非 SASS 元素中使用了 import.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

这是错误的做法吗？ ..或者有解决办法吗？

Answer 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
}