CSS Require Order - Asset Pipeline

Question

I have an app rendering a view called feeds and it comes with it's own styling called feeds.scss . The view uses a layout called default_app.scss .

The controller action has render layout: 'default_app' . In the default_app.html.erb , = stylesheet_link_tag 'default_app', params[:controller] , which indicates the layout stylesheet should be required first.

The issue here is that within default_app.scss , I define a set of constant colors such as: $red: #aaa but when I use $red within feeds.scss , it's undefined. This doesn't make sense because shouldn't the layout styling be required prior to the page(view specific css)?

app
- assets
  - stylesheets
    - newsfeeds
      - feeds.scss (want to use colors here)
  - default_app.scss (defined colors here)
- controllers
  - newsfeeds_controller.rb
- views
  - newsfeeds
    - feeds.html.haml
  - layouts
    - default_app.html.haml (= stylesheet_link_tag 'default_app', params[:controller])

Answer 1

Scss variables are processed at compile time, the order you use them doesn't actually matter for variables since, by the time the code links to the .css file, the variables were already replaces by the scss compiler on the assets pipeline, feeds.css.scss doesn't know what $red means since it's defined in another file.

You have to include the variables on every .scss file that uses them.

_colors.css.scss

$red: #ff0000;
$blue: #0000ff;
$gree: #00ff00;

default_app.css.scss

@import('colors');
.something {
  color: $red;
}

feeds.css.scss

@import('colors');
.other_thing {
  color: $red;
  background: $blue;
}

Answer 2

Here's my first shot at it. I am not sure what you're doing with the params[:controller] . The stylesheet_link_tag takes sources as an argument, see here http://apidock.com/rails/ActionView/Helpers/AssetTagHelper/stylesheet_link_tag

This would be a default setup - stylesheet_link_tag "style", media: "all"

If you are looking for controller specific example - see the example here http://guides.rubyonrails.org/asset_pipeline.html

"You can also opt to include controller specific stylesheets and JavaScript files only in their respective controllers using the following:"

<%= javascript_include_tag params[:controller] %> or <%= stylesheet_link_tag params[:controller] %>

Give section 2.4 ( http://guides.rubyonrails.org/asset_pipeline.html ) a read where you are handling your main layout css through application.css . This should point you in the right direction. It's likely due to how you're requiring files. If you're still stuck, feel free to show how you're requiring files