CSS styles not compiled for Rails assets

Question

I have the following setup with my style sheets in a Rails 3.2 application. I have an application.css file with many styles defined in them and several other files for more specific styles, for example, everything related to the footer is in footer.css.

Everything works in development, but during the production process, none of the mobile styles in the required files is compiled, i.e. everything above the line @media only screen and (min-width: 768px) for each style sheet.

The main application.css file contains about 700 lines of styles, after which it also has @media only screen and (min-width: 768px) media request. Inside the media query, there are about 700 lines overlapping the previous 700 lines of desktop styles. However, these styles have been compiled successfully. I do not understand why the required files do not work properly.

application.css

 *= require_self *= require base.css *= require footer.css .benefit { display: block; font-size: 0.8em; margin: 1em; } @media only screen and (min-width: 768px) { .benefit { font-size: 1em; margin: 3em; } } # All above styles compile 

Base.css

 header, section, footer, aside, nav, article, figure { display: block; } html, body { height: 100%; background: #DEDEDE; } # Above styles don't compile @media only screen and (min-width: 768px) { # Below style does compile body { text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); } } 

footer.css

 footer { background: #ffffff; width: 100%; } # Above style doesn't compile @media only screen and (min-width: 768px) { # Below style does compile footer { background: none repeat scroll 0 0 #000; color: #818A8A; padding: 0; } } 

Edit: I tried to explicitly add the necessary styles of mobile CSS files to my own media queries, as suggested in this answer , and updating the code below, but that didn't work.

footer.css

 @media only screen { footer { background: #ffffff; width: 100%; } } # Above style STILL doesn't compile @media only screen and (min-width: 768px) { # Below style does compile footer { background: none repeat scroll 0 0 #000; color: #818A8A; padding: 0; } } 

Answer 1

With over 1000 lines of styling, you’ll definitely need to omit the half-line or braces somewhere along the line. As d_ethier suggested in the comments, one way to test is to compile with the --trace flag, but your compilation will fail if the assets are simple CSS files.

What you want to do is include sass-rails in your Gemfile and rename your stylesheets to scss files so that if any errors occur, they will lead to compilation failure and highlight your problem. Temporarily move the styles from your application.css file to another file (say, all.css.scss):

application.css

 *= require_self *= require all.css.scss *= require base.css.scss *= require footer.css.scss