2

我试图弄清楚 CSS 优先规则是如何在 Rails 中工作的。

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

管理员.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，他们都有背景图像。

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

4

3 回答 3

4

@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' %>">
于 2012-07-18T04:33:33.897 回答
1

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

您也可以只在 body 上使用特定的 css 类供管理员使用，这将覆盖默认的正文样式：

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

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

于 2012-07-18T04:40:25.710 回答
0

Rails assets pipeline为所有包含的内容创建一个minified版本css并将其添加到每个页面。

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

于 2017-02-04T14:08:14.457 回答