css variables - declare variable if not already defined

Question

I have a project which is split up into the parent app, and several reusable child components in separate repositories. I'd like to define default CSS variables in these child components, which can be overridden by the parent app, however I can't find the right syntax for this. Here's what I've tried:

/* parent */
:root {
  --color: blue;
}

/* child */
:root {
  --color: var(--color, green);
}

.test {
  width: 200px;
  height: 200px;
  background: var(--color, red);
}

https://codepen.io/daviestar/pen/brModx

The color should be blue, but when the child :root is defined, the color is actually red, at least in Chrome.

Is there a correct approach for this? In SASS you can add a !default flag to your child variables which basically means 'declare if it's not already declared'.

Sherbrow · Accepted Answer · 2022-02-08 10:55:40Z

5

I would suggest an approach by aliasing the variables in the component and using "parent" or root variables as main value while local value is by !default.

.parent {
  --background: red;
}

.child {
  --child_size: var(--size, 30px); /* !default with alias */
  --child_background: var(--background, green); /* !default with alias */

  background-color: var(--child_background);
  width: var(--child_size);
  height: var(--child_size);
}

<div class="parent">
  <div class="child"></div>  
</div>
<hr>
<div class="child"></div>

answered Feb 8, 2022 at 10:55

Sherbrow

17.4k3 gold badges67 silver badges79 bronze badges

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

1 Comment

daviestar Over a year ago

That's a neat approach, thanks

Hitmands · Accepted Answer · 2017-08-22 08:50:47Z

2

CSS stands for cascading style sheets, so you cannot override anything by a parent...

The only way is to create a stronger rule.

look at .c1 and .p1

.parent {
  --background: red;
}

.child {
  --size: 30px;
  --background: green; /* this wins */

  background-color: var(--background);
  width: var(--size);
  height: var(--size);
}

.p1 .c1 {
  --background: red; /* this wins */
}

.c1 {
  --size: 30px;
  --background: green;

  background-color: var(--background);
  width: var(--size);
  height: var(--size);
}

<div class="parent">
  <div class="child"></div>  
</div>

<hr />

<div class="p1">
  <div class="c1"></div>  
</div>

answered Aug 22, 2017 at 8:50

Hitmands

14.2k4 gold badges41 silver badges78 bronze badges

1 Comment

Hitmands Over a year ago

does it suit for you?

daviestar · Accepted Answer · 2017-08-22 09:40:25Z

2

Thanks to @Hitmands hint I have a neat solution:

/* parent */
html:root { /* <--- be more specific than :root in your parent app */
  --color: blue;
}

/* child */
:root {
  --color: green;
}

.test {
  width: 200px;
  height: 200px;
  background: var(--color);
}

edited Aug 22, 2017 at 9:40

answered Aug 22, 2017 at 8:56

daviestar

4,7116 gold badges33 silver badges50 bronze badges

3 Comments

Hitmands Over a year ago

I don't understand why moving variables to the global scope could be neater?

daviestar Over a year ago

My most common use case for CSS variables is for global stuff like font-size and theme colors, and it's this stuff I want to be able to override from the parent app.

daviestar Over a year ago

Also using this approach means you don't have to add a new CSS rule in your parent app, ie. .parent .child { /* override */ }, you can let the variable specificity do that for you.

Collectives™ on Stack Overflow

css variables - declare variable if not already defined

3 Answers 3

1 Comment

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related