title: How to define PostCSS variables in one CSS file to be "imported" into another CSS file?
body: <p>In Sass I can define my variables in a separate file <code>_variables.scss</code>, then make those variables available anywhere I use <code>@import variables;</code>. (Actually the variables are globally available after their first import.)</p>
  
  <p>With PostCSS I can use <code>postcss-simple-vars</code> or <code>postcss-css-variables</code> to define variables local to a single file. I'd like to define all/most variables in a single file, then <code>@import</code> that file wherever I need to use them.</p>
  
  <p>I know the PostCSS plugins can have pre-defined variables configured for the plugin, but then I cannot, for example, calculate a contrasting color for a given background.</p>
  
  <hr>
  
  <p>Edit: I probably wasn't clear about what my question was.</p>
  
  <p><strong>Is there a way to define PostCSS variables in a CSS file such that the variables are not global, but can be "imported" into another CSS file?</strong></p>
  
  <p>As mentioned above, I can use Sass, but then all variables are effectively global (not ideal). Otherwise in PostCSS I can define the variables in each stylesheet I need them (what's the point?), <em>or</em> I can define them in a static JavaScript structure (static in that they can't reference other variables).</p>