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

我在我的项目中有20个.scss表单。SASS @import取决于屏幕大小的多个文件

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

我有一个非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

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

来源

2013-12-12 Haystack

当您使用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);

我已经提交代表你的bug报告，您可以在这里跟踪：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 
}

来源

2013-12-12 17:42:01 cimmanon

我可以得到结构平直的话..青菜DIR - sheet1.scss sheet2.scss imports.scss（其包含上面更正的代码）css dir - sheet1.css sheet2.css imports.css（由imports.scss编译）是否正确？（抱歉格式不对） – Haystack

请修改您的问题，而不是尝试将代码放在评论中，这只会让阅读困难。我已经修改了我的答案，以显示使用Sass执行导入的首选方式。 – cimmanon

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

回答

相关问题