Here is the example

main.css mobo.css

styleguide.css (Where all CSS variables are mentioned)

Can I use them in main.css and mobo.css ???

CodePudding user response：

"CSS variables" is the colloquial name for Custom Properties.

Like any other property, it doesn't matter where it is set from¹, only that it applies to the element. Therefore it doesn't matter which stylesheet sets the properties or which one reads it.

<style>
  #foo {
    background: var(--example);
    height: 35px;
  }
</style>

<style>
  #foo {
    --example: red;
  }
</style>


<div id="foo">
</div>

Footnotes

1. If multiple sources try to set the same property then it might start to matter since document order is one of the decision points when calculating the cascade order.

CodePudding user response：

Yes, just link your file with all the variables in the HTML

<link rel="stylesheet" href="var.css">

Or if you are using SASS, in your main css file you can do :

@import('file.css');