Rails 预编译资产 - 响应式 css 的最佳实践

Question

这些是我的页面包含的样式（顶部的样式在生产中返回错误）

<link href="/assets/foundation.css" rel="stylesheet" type="text/css" />
<link href="/assets/app.css" rel="stylesheet" type="text/css" />
<link href="/assets/full_size.css" media="screen and (min-width: 761px)" rel="stylesheet" type="text/css" />
<link href="/assets/mobile_size.css" media="screen and (max-width: 760px)"   rel="stylesheet" type="text/css" />

<link href="/assets/application-b0a44b2bbc0d3c94d855fbb830c2098d.css" media="screen" rel="stylesheet" type="text/css" />
<script src="/assets/application-cd6a361c13ee838fceb09ecb2c58c467.js" type="text/javascript"></script>

我的网站是响应式的，因此我希望根据屏幕大小在需要时包含样式。有没有办法单独预编译我的 css，使它看起来像这样：

<link href="/assets/foundation-b0a44b2bbc0d3c94d855fbb830c2098d.css" rel="stylesheet" type="text/css" />
<link href="/assets/app-b0a44b2bbc0d3c94d855fbb830c2098d.css" rel="stylesheet" type="text/css" />
<link href="/assets/full_size-b0a44b2bbc0d3c94d855fbb830c2098d.css" media="screen and (min-width: 761px)" rel="stylesheet" type="text/css" />
<link href="/assets/mobile_size-b0a44b2bbc0d3c94d855fbb830c2098d.css" media="screen and (max-width: 760px)"   rel="stylesheet" type="text/css" />

那么就不需要application.css了，把它结合起来也破坏了我的css。我的网站在开发中看起来不错:)

现在我在 config/application.rb 中设置了 config.assets.enabled = false，压缩 css 并自己手动包含它会更好吗？

这有点类似于这个问题，除了我不喜欢任何答案。当然有一个简单的解决方案。 Using Rails 3.1 assets pipeline to conditionally use certain css

Answer 1

我认为您总体上使用资产管道的方向是错误的。如果您要使用管道，您只需要保留application.css - 这是一个清单文件，您可以使用它来包含您的css 文件。我的建议是将您的 link href= 从视图中移出并使用清单文件（application.css），如下所示：

*= require_self
*= require foundation
*= require mobile_size

....
*= require_tree

您现在包含的是预编译的 css 文件（注意哈希前缀），每次修改资产时，哈希前缀都会更改。

.js 文件的情况也是如此 - 您必须将它们包含在 application.js 清单文件中。

编辑：使用 SASS (3.2) 和媒体查询（如this CSS-tricks article 中所述，关于@penner）的想法非常适合这种情况。