title: What are best practices organizing css for the Asset Pipeline in Rails 4
body: <p>What are best practices organizing css for the Asset Pipeline in Rails 4? I want to be able to share color variables among files, and want to control in what order the scss files are fired. Would it be better to not use the manifest syntax, rename the application.css to application.css.scss and use imports instead?</p>
  
  <p>This is how I've structure the folder </p>
  
  <pre><code>assets/stylesheet:
  --application.css
  --colors.css.scss
  --fonts.css.scss
  --frameworks.css.scss
  --layout.css.scss
  --nav.css.scss
  </code></pre>
  
  <p>And the application.css file looks like this:</p>
  
  <pre><code>*= require_self
  *= require frameworks
  *= require fonts
  *= require colors
  *= require layout
  *= require_tree .
  </code></pre>
  
  <p>And for example the fonts.css.scss looks like this: </p>
  
  <pre><code>@import url(//fonts.googleapis.com/css?family=Raleway:400,700,800,900);
  @import url(//fonts.googleapis.com/css?family=Merriweather:400,900,700);
  </code></pre>