Question

我正在试图弄清楚css优先规则在rails中是如何工作的。

我有一个应用程序，我想为不同的控制器使用不同的css规则，如果我向其中一个css.scss文件添加一些css，它会影响所有控制器页面。

admin.css.scss：

body {
    background: #fff;
}

rsv_ps.css.scss

body {
    background: url("DSC_1581.JPG") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='DSC_1581.JPG', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='DSC_1581.JPG', sizingMethod='scale')";
}

如果我同时访问http://localhost:3000/admin或http://localhost:3000/rsvps/new，则他们都有背景图片。

任何以http://localhost:3000/admin开头的网址都不应该使用admin.css.scss样式表而不能使用rsv_ps.css.scss样式表吗？

Answer 1

@meagar和@catfish的评论是正确的。（不确定为什么他们没有把他们的答案放在帖子中）

单独的页面仅用于组织，它们不是用于保持css分开。资产管道将单独的css文件组合并最小化为一个大文件。

因此，您需要使用特定选择器自行分隔样式。

像

这样的东西

# for admin
body.admin {

}

#html
<body class='admin'>


# for everything else
body.default {

}

#html
<body class='default'>

在布局中指定标记

<body class="<%= @admin ? 'admin' : 'default' %>">

Answer 2

您可以随时删除行*= require_tree .，然后手动设置清单，将要编译的文件包含到application.css中（您也可以将application.css转换为application.css.scss并使用@import）。这意味着您可以使用stylesheet_link_tag帮助程序为每个视图添加特定的样式表。 请注意，您必须将需要编译的.css/.scss个文件（不包含在application.css中）添加到config/environments/production.rb

你也可以在body的body上使用特定的css类来覆盖默认的body样式：

<body class='<%= 'admin' if @admin %>'>

并在控制器中使用过滤器设置@admin。

Answer 3

Rails assets pipeline为所有收录的minified创建一个css版本，并将其添加到每个页面。

您需要为不同的页面使用单独的selectors。否则，还有一个选项是使用layout来分隔它，但它不是创建多个布局的好方法，只是为了区分每页都有css。

Rails css / scss优先级

3 个答案: