CODEWITHSUNDEEP
csscss-variables
Utsav Sheth
Utsav Sheth

Reputation: 21

Can we use CSS variable in different css files

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 ???

Upvotes: 1

Views: 1718

Answers (2)

Quentin
Quentin

Reputation: 943142

"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.

Upvotes: 2

ambroiselebs
ambroiselebs

Reputation: 113

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');

Upvotes: 0

Related Questions