我正在使用Rails 3.1.rc5构建我的第一个独立Rails应用程序.我的问题是我希望我的网站有条件地呈现各种CSS文件.我正在使用Blueprint CSS,我试图在screen.css大多数情况下渲染sprockets/rails ,print.css只有在打印时,并且ie.css只有从Internet Explorer访问该站点时.
不幸的是,清单中的默认*= require_tree命令application.css包含assets/stylesheets目录中的所有内容,并导致令人不快的CSS混乱.我目前的解决方法是一种蛮力方法,我单独指定所有内容:
在application.css中:
*= require_self
*= require home.css
...
*= require blueprint/screen.css
在我的样式表部分(haml):
<!--[if lt IE 9]
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
![endif]-->
= stylesheet_link_tag "application"
= stylesheet_link_tag 'blueprint/print', media: 'print'
<!--[if lt IE8]]
= stylesheet_link_tag 'blueprint/ie'
![endif]-->
= javascript_include_tag "application"
这可行,但它不是特别漂亮.我已经做了几个小时的搜索甚至到目前为止,但我希望有一些更容易的方法,我刚刚错过了.如果我甚至可以有选择地渲染某些目录(不包括子目录),那么整个过程就会变得不那么严格.
谢谢!
所以,我有一个app/assets/stylesheets/看起来像这样的目录结构:
|-dialogs
|-mixins
|---buttons
|---gradients
|---vendor_support
|---widgets
|-pages
|-structure
|-ui_elements
在每个目录中,有多个sass partials(通常是*.css.scss,但是一个或两个*.css.scss.erb).
我可能会假设很多,但rails应该自动编译那些目录中的所有文件,因为*= require_tree .在application.css中,对吧？
我最近尝试通过删除所有颜色变量并将它们放在根app/assets/stylesheets文件夹(_colors.css.scss)中的文件中来重构这些文件.然后我在app/assets/stylesheets名为master.css.scss 的根文件夹中创建了一个文件,如下所示:
// Color Palette
@import "colors";
// Mixins
@import "mixins/buttons/standard_button";
@import "mixins/gradients/table_header_fade";
@import "mixins/vendor_support/rounded_corners";
@import "mixins/vendor_support/rounded_corners_top";
@import "mixins/vendor_support/box_shadow";
@import "mixins/vendor_support/opacity";
我真的不明白rails如何处理资产编译的顺序,但它显然不利于我.看来没有一个文件意识到他们有任何变量或mixins被导入,所以它抛出错误,我无法编译.
Undefined variable: "$dialog_divider_color".
(in /home/blah/app/assets/stylesheets/dialogs/dialog.css.scss.erb)
Undefined mixin 'rounded_corners'.
(in /home/blah/app/assets/stylesheets/widgets.css.scss)
该变量$dialog_divider_color在_colors.css.scss中明确定义,并_master.css.scss导入颜色和我的所有mixins.但显然铁路没有获得那份备忘录.
有什么方法可以解决这些错误,还是我需要将所有变量定义放回每个单独的文件,以及所有mixin导入？
不幸的是,这家伙似乎并不认为这是可能的,但我希望他错了.任何想法都非常感谢.