Rails css/scss precedence

Question

I'm trying to figure out how the css precedence rules work in rails.

I have an app where I want to use different css rules for different controllers and if i add some css to one of the css.scss files, it affects all controller pages.

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')";

}

If i go to both

http://localhost:3000/admin

or

http://localhost:3000/rsvps/new

, they both have the background image.

Shouldn't any urls that start with

http://localhost:3000/admin

use the admin.css.scss stylesheet and not use the rsv_ps.css.scss stylesheet?

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

The comments by @meagar and @catfish are correct. (not sure why they're not putting their answers in a post)

The separate pages are just for organization, they are not for keeping the css separate. The asset pipeline will combine and minimize the separate css files into one big file.

So you need to separate the styles yourself by using specific selectors.

Something like

# for admin
body.admin {

}

#html
<body class='admin'>


# for everything else
body.default {

}

#html
<body class='default'>

To specify the markup in your layout

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

Rails css/scss precedence

Sign up