ruby-on-rails-3.2 - 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

我认为您在一般情况下使用 Assets 管道的方向是错误的。如果您要使用管道，您只需保留 application.css - 这是一个 list 文件，您可以使用它来包含您的 css 文件。我的建议是从 View 中移动您的 link href= 并像这样使用 list 文件 (application.css):

*= require_self
*= require foundation
*= require mobile_size

....
*= require_tree

您现在包含的是预编译的 css 文件(注意散列前缀)，每次您修改 Assets 时，散列前缀都会更改。

.js 文件的情况相同 - 您必须将它们包含在 application.js list 文件中。

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