Catfish Catfish - 4 years ago 211
Sass (Sass) Question

Rails css/scss precedence

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?

Dty Dty
Answer Source

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' %>">
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download