title: duplicate css from scss files in Rails
body: <p>I noticed in Firebug that the css for the <code>body</code> element is showing twice (the first time all the rules are striked out). The first <code>body</code> element comes from the url: <code>http://localhost:3000/assets/application.css?body=1</code></p>
  
  <p>The 2nd <code>body</code> element comes from the url:
  <code>http://localhost:3000/assets/scaffolds.css?body=1</code></p>
  
  <p>I added another scss file in the <code>/app/assets/stylesheets</code> directory called header.css.scss. That is now being included in all webpages as <code>/assets/header.css</code>, like I wanted. But the application.css is again duplicating all of its contents in every page.</p>
  
  <p>Did I do something wrong? Was I not supposed to create the header.css.scss file in assets? Why are all my css rules being duplicated?</p>
  
  <p><em><strong>UPDATE</em></strong>: My application.css file only has some simple css in it:</p>
  
  <pre><code>/*
   * This is a manifest file that'll be compiled into application.css, which will include all the files
   * listed below.
   *
   * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
   * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
   *
   * You're free to add application-wide styles to this file and they'll appear at the top of the
   * compiled file, but it's generally better to create a new file per style scope.
   *
   *= require_self
   *= require_tree .
  */
  body {
      margin: 0;
  }
  #content {
      padding: 10px;
      background-color: #eee;
  }
  code {
      background-color: #d0d0d0;
      padding: 1px 3px;
  }
  </code></pre>
  
  <p>My header.scss file has nothing in common with application.css:</p>
  
  <pre><code>@import "compass/css3/images";
  
  header {
    border-bottom: 1px solid #6787d2;
    height: 7em;
    position: relative;
    background-color: #f0edee;
    background-image: url("/assets/background_header.png");
    padding: 10px 10px 0 10px;
    box-shadow: 0 -1px 3px #C0BABB inset;
  }
  header address {
    background-color: #b9dd8c;
    @include filter-gradient(#b9dd8c, #5ab86d, vertical);
    $experimental-support-for-svg: true;
    @include background-image(linear-gradient(top,  #b9dd8c 0%,#5ab86d 100%));
    border: 1px solid #15905b;
  }
  </code></pre>
  
  <p><code>application.html.erb</code> layout only has a single CSS reference:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;whatever&lt;/title&gt;
    &lt;%= stylesheet_link_tag "application", :media =&gt; "all" %&gt;
  </code></pre>
  
  <p>Finally, views have no references to CSS whatsoever.</p>