mru*_*ult 5 css ruby-on-rails sass
首先,我是rails的新手.我在rails网站上工作.它有三个控制器,即 application_controller,static_pages_controllers和users_controller.除了static_pages_controllers 之外,它们在app/assets/stylesheets /(application.css和users.css.scss)中都有各自的css(scss)文件, 并且还有一个custom.css.scss用于整体布局或公共元素.我使用了控制器特定的这里提到的样式表
我的问题是:
1)custom.css中的css规则是否适用于所有控制器视图,除了那些我在单独的控制器css中明确定义的视图？
2)如果是,那么我在custom.css.scss和users.css.scss中都定义了一个规则
custom.css.scss - body {background-color:color1;}
users.css.scss - body {background-color:color2;}
但是static_pages_controllers和users_controllers中的视图仍然显示背景color2.我哪里错了？只有users_controller中的视图必须显示color2,而static_pages_controller必须显示color1.
num*_*407 39
关于如何使用资产管道的Rails指南并不能说明全部真相.它说:
您应该将任何JavaScript或CSS唯一的控件放在各自的资产文件中,因为这些文件可以仅为这些控制器加载,例如<%= javascript_include_tag params [:controller]%>或<%= stylesheet_link_tag params [ :controller]%>.
现在,您可以按照他们的建议并为每个控制器加载特定的样式表,但它不能像开箱即用的那样工作.忽略了你必须做的一些事情.
您需要//= require_tree .从application.css中删除该指令,该指令将保留在该文件夹中的所有其他资产.这意味着每个页面都会加载users.css,如果您在示例中添加了特定于控制器的样式表行,则会加载控制器样式表两次.
您需要告诉Rails预编译单个文件.默认情况下,预编译器会忽略application.css之外的所有*.css文件.要解决此问题,您必须编辑配置以执行以下操作:
# in environments/production.rb
# either render all individual css files:
config.assets.precompile << "*.css"
# or include them individually
config.assets.precompile += %w( users.css static_pages.css )
最后,按照Rails指南的说明,您需要更改样式表包含,如下所示:
<%# this would now only load application.css, not the whole tree %>
<%= stylesheet_link_tag :application, :media => "all" %>
<%# and this would load the controller specific file %>
<%= stylesheet_link_tag params[:controller] %>
但是,上述可能并非真正的最佳实践.当然,有时您可能需要单独的样式表,但大多数时候您可能只想提供样式包,以便客户端可以缓存一个文件.毕竟,这就是资产管道开箱即用的方式.
除此之外,如果你只是在控制器特定的样式表中添加覆盖规则,那么你就是在门外创建一个特定于加载顺序的样式纠结.这......可能不太好.
更好的方法可能是在控制器表中命名样式,如下所示:
// in application.css (or some other commonly loaded file)
background-color: $color1;
// in users.css.scss
body.controller-users {
background-color: $color2;
}
// and so on...
然后在您的布局中,将控制器名称添加到body类,如:
<body class="controller-<%= params[:controller] %>">
通过这种方式,您的样式将通过命名空间解决,而不仅仅是加载顺序.此外,使用此解决方案,如果您愿意,您仍然可以继续加载单独的控制器特定样式表,或者您可以忘记这一点,并且只需将所有内容编译到application.css中,就像默认情况下那样.将为每个页面加载所有样式,但仅应用特定于控制器的样式.
| 归档时间： |
|
| 查看次数： |
6183 次 |
| 最近记录： |