当前位置: 首页 > 面试题库 >

使用Rails 3.1资产管道有条件地使用某些CSS

金慈
2023-03-14
问题内容

我正在使用Rails 3.1.rc5构建我的第一个单独的Rails应用程序。我的问题是我想让我的网站有条件地呈现各种CSS文件。我正在使用Blueprint
CSS,并且试图在screen.css大多数情况下渲染链轮/轨道,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文件夹:

app/assets/stylesheets
+-- all
    +-- your_base_stylesheet.css
+-- print
    +-- blueprint
        +-- print.css
    +-- your_print_stylesheet.css
+-- ie
    +-- blueprint
        + ie.css
    +-- your_ie_hacks.css
+-- application-all.css
+-- application-print.css
+-- application-ie.css

然后,编辑三个清单文件:

/**
 * application-all.css
 *
 *= require_self
 *= require_tree ./all
 */

/**
 * application-print.css
 *
 *= require_self
 *= require_tree ./print
 */

/**
 * application-ie.css
 *
 *= require_self
 *= require_tree ./ie
 */

接下来,您将更新应用程序布局文件:

<%= stylesheet_link_tag "application-all", :media => "all" %>
<%= stylesheet_link_tag "application-print", :media => "print" %>

<!--[if lte IE 8]>
    <%= stylesheet_link_tag "application-ie", :media => "all" %>
<![endif]-->

最后,不要忘了在您的config / environments / production.rb中包含这些新的清单文件:

config.assets.precompile += %w( application-all.css application-print.css application-ie.css )

更新:

正如Max所指出的那样,如果您遵循这种结构,则必须注意图像参考。您有几种选择:

  1. 移动图像以遵循相同的模式
    • 请注意,这仅在图像未全部共享时有效
    • 我希望这对于大多数人来说都是一个入门者,因为它会使事情变得过于复杂
  2. 限定图像路径:
    • background: url('/assets/image.png');
  3. 使用SASS助手:
    • background: image-url('image.png');


 类似资料:
  • 问题内容: 我正在尝试创建一个名为groovy1.txt的文件,其内容为“使用Groovy方式处理文件很容易”。 注意:我不想使用外壳程序来创建此文件,而是想使用Groovy来实现。 我的詹金斯管道中有以下脚本。 但是它会抛出FileNotFound(权限被拒绝)错误,如下所示 问题答案: Jenkins Pipeline提供了可用于在作业的工作空间内写入文件的步骤。 看下面的例子: 运行此管道脚

  • 传递参数 链接管道 我们可以将多个管道连接在一起,以便在一个表达式中使用多个管道。

  • 我正在表单上放置一个javascript按钮。脚本工作,但我可以使该按钮只有当描述字段以数字开头时才可见吗?

  • 我试图翻译这个(简化)代码使用Java-8流: 以下是我尝试过的: 但以上给出了所有

  • 问题内容: 我正在使用“可拖动”指令来支持图像拖动。但是,根据用户的角色,我需要为某些用户组禁用图像拖动。我使用了以下代码。 该方法在模板范围内,并返回或。我不想为所返回的每个值创建两个大的重复元素。换句话说,我不是在寻找以下方法来解决此问题。 还有其他方法可以避免代码重复吗? 问题答案: Angular包含对有条件声明HTML属性的支持,作为动态标题指令。 的官方文件 例 在您的情况下,代码可能

  • 我试图找出正确的方法,有条件地包括一个视图与swiftui。我不能直接在视图中使用,必须使用堆栈视图才能做到这一点。 这是可行的,但似乎会有更干净的方法。