css3 - How to include files depending on the request.domain -

i need include file

"#{request.domain.split(".").first}.css.scss" 

into custom.css.scss file.

i don't know how proceed. goal declare specific variable, , give them different values in each file, loading dynamically different files each different request

file one.css.scss

  $button_primary_color: #xxx;   $header_background_color: blue; 

file two.css.scss

  $button_primary_color: #zzz;   $header_background_color: red; 

i tried using css3 variables, without success:

home[sn="one"] {   --button_primary_color: #xxx; } home[sn="two"] {   --button_primary_color: #yyy; } 

(it doesn't behave standard in different browser), , doesn't substitute following statement.

div {     color: var(--button_primary_color); } 

i'd have more bootstrap/sass solution. how can accomplish this?

i'm still trying figure out best method, 1 thing i've done in past set config.assets.precompile have domain specific css files , have layout generate appropriate code pull in specific css file.

config.assets.precompile += %w( application.js application.css domain1.css domain2.css)

where have in asset pipeline domain1.css pulling in whatever domain specific code need.

much cleaner trying include logic switches within css code (which cannot btw afaik).