使用sass进行内联媒体查询的单独文件？

我想知道是否有可能使用SASS为每个媒体查询（手机，平板电脑，桌面等）有一个单独的文件，然后使用内嵌媒体查询有sass编译该类的内联媒体查询到该特定文件？使用sass进行内联媒体查询的单独文件？

例如：

说我有一个sass部分_article.scss。

.test-class { 
     color: #000000; 
     background: red; 
     width: 980px; 

    @media only screen and (max-width : 300px) { 
     width: 100px; 
     height: 100px; 
    } 
}

这部分是在base.scss中导入的。

@import "partials/article";

现在我想的是，与其查询在base.css文件被编译每一个媒体，我想与手机，平板电脑等每一个具体的媒体查询被编译到它自己的文件（mobile.css ，平板电脑，CSS等）。

换句话说，我希望内联媒体查询的好处，同时仍然为每个设备都有一个非常模块化的文件结构。当我提供文件时，我只需要服务器2个小文件（base.css和mobile.css）。

这可能吗？我目前刚刚创建了一个mobile.scss文件，然后手动覆盖了项目中与我一样大的项目样式，这将导致稍后的问题。

有没有更好的选择？

感谢

来源

2014-10-06 Deep

你意识到从文档链接的每个CSS文件都会被每个客户端下载，即使它们不符合媒体条件，对吧？这样做没有性能优势。 – cimmanon 2014-10-06 02:26:25

是的，我意识到这一点。我想这样做的原因是因为它更容易理解（逻辑上），尤其是因为其他客户将在他们自己的公司网站上使用这些文件。此外，如果我们想要它可能只提供所需的文件使用JavaScript和后备。 – Deep 2014-10-06 02:35:37

@cimmanon其实有。通过谷歌的PageSpeed Insights文档，由media =“prientation：portrait”（或其他标签为“print”等）包含和定义的css被视为“非阻塞”，因此它不会阻止呈现LAYOUT ，在它被绘之前。因此这是一个性能提升。通常，当你深入到网页的表现并希望SEO喜欢你时，你会做更多的事情 - 甚至更多。 – MiKE 2016-07-01 19:34:26

-4

您可以用jQuery做到这一点：

function adjustStyle(width) { 
    width = parseInt(width); 
    if (width < 777) { 
     $(".body").attr("href", "css/small.css"); 
    } else if ((width >= 778) && (width < 980)) { 
     $(".body").attr("href", "css/medium.css"); 
    } else { 
     $(".body").attr("href", "css/big.css"); 
    } 
} 

$(function() { 
    adjustStyle($(this).width()); 
    $(window).resize(function() { 
     adjustStyle($(this).width()); 
    }); 
});

和更好的方式是，包括设备的列表，然后包括你的CSS表，这样你不会有双重下载，这意味着只有在设备匹配时才会下载。为此，您可以使用Detect Mobile Browsers中的任何语言，然后根据自己的喜好进行调整。

来源

2014-10-06 02:53:18 Devin

不回答问题。 OP希望采用单个Sass文件，并让它生成多个CSS文件，并通过媒体查询分解出来。 – cimmanon 2014-10-06 03:01:36

是的，你是对的，有时候我会混淆可用性和什么与谁知道什么的形式，规则和协议有关。对不起这是我的错。 – Devin 2014-10-06 03:14:53

使用sass进行内联媒体查询的单独文件？

回答

相关问题