Can we use CSS variable in different css files

Question

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

Welcome to Stack Overflow!, Please take the tour, and read how to ask, an On Topic question, then look at the Question Check list, the perfect question and how to create a minimal reproducible example, Complete and Verifiable Example — JustAG33K
– JustAG33K, Commented Aug 16, 2022 at 21:12

Quentin · Accepted Answer · 2022-08-16 21:30:40Z

2

"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

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.

answered Aug 16, 2022 at 21:30

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ambroiselebs · Accepted Answer · 2022-08-16 21:12:13Z

0

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

answered Aug 16, 2022 at 21:12

ambroiselebs

1431 silver badge14 bronze badges

Collectives™ on Stack Overflow

Can we use CSS variable in different css files

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related