Carry Sass variables across all stylesheet files in Rails

Question

I have a site_settings.scss file which contain all the the variables for my Rails app:

app/assets/stylesheets/site_settings.scss

$primary_color: #4285F4;
$dark_color: #333333; 
...

Right now, if I want to use these variable inside a file i need to do this inside that file:

import 'site_settings.scss'

I need to put this at the beginning of EVERY FILE that I want to use these variables, otherwise Rails will give me the Undefined variable: error.

I have tried putting import 'site_settings.scss' inside the application.scss or custom.scss but neither of them is working.

I have also tried to use require 'site_settings' in the aplication.scss and rename application.scss to application.css.scss as being mentioned here: http://mildlyinternet.com/code/scss-variables-asset-pipeline.html , but it's still not working.

Here is my application.scss:

/*
 *= require_self
 *= require font-awesome 
 */

@import "bootstrap-sprockets";
@import "bootstrap";
@import "custom";
@import "devise";
@import "site_settings";

So, how do I solve this, so that I don't have to write import 'site_settings.scss' in every file each time?

Answer 1

You should rename all files that will use the shared variables to start with _. This will render the other files in context of partial files, which will use the previous declared variables in @import 'site_settings'. So you will have site_settings.scss and quickrails/_general.scss, quickrails/_media_query.scss and so on.

Those imports are considered partials, that is why the name should start with underscore, but when importing you use without it. Here is a material about this:

Why put in front of the file name "_" or "_" in scss/css?