我想知道是否有可能使用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文件,然后手动覆盖了项目中与我一样大的项目样式,这将导致稍后的问题。
有没有更好的选择?
感谢
你意识到从文档链接的每个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