Ruby on rails 3.2 Rails预编译资产-响应css的最佳实践

这些是我的页面包含的样式（最上面的样式在生产时返回get errors）

我的网站响应迅速，因此我希望根据屏幕大小将样式包括在内。有没有一种方法可以单独预编译我的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并手动将其包括在内是否更好

这有点类似于这个问题，只是我不喜欢任何答案。当然有一个简单的解决办法。

---

我认为您在使用资产管道时走了一个错误的方向。如果要使用管道，只需保留

应用程序.css

——这是一个清单文件，用于包含

css

文件。我的建议是将您的

链接href=

从视图中移出，并使用清单文件（application.css），如下所示：

*= require_self
*= require foundation
*= require mobile_size

....
*= require_tree

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

.js

文件的情况也是如此-您必须将它们包含在

应用程序.js

清单文件中

---

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

虽然media=“screen and（max width:760px）”你是什么意思，但这并没有保留附加到我的css样式表上的逻辑？如果您在清单中包含的某个样式中有定义，那么资产管道应该遵循您的逻辑。将所有css样式表合并为一个会破坏我的css。您的浏览器根据屏幕大小有条件地包含我的css。因为您的屏幕大于760px，所以该样式表从未包含在内。样式Maulix.siZ.CSS覆盖了FulySsi.CSSs中的样式，您可能会考虑在项目中使用SASS。对于一些基本指令，您可以了解如何避免此覆盖问题。我认为这就是答案，你应该把它放在答案中，因为这是你的想法。

*= require_self
*= require foundation
*= require mobile_size

....
*= require_tree