CSS Variables - Swapping Values

CSS Variables - Swapping values?

You are creating a cyclic dependence because you are defining each property using the other one and this won't work. Instead you may try something like this by introducing more variables:

:root {  --p:#fff;  --s:#000;  --primary-color: var(--p);  --secondary-color: var(--s);}
body {  background-color: var(--primary-color);}
button {  background-color: var(--secondary-color);}
div {  /* i'd like to do the following: */  --primary-color: var(--s);  --secondary-color: var(--p);    background-color: var(--primary-color);}

<p>White background</p><button>Black background</button><div>  <p>Black background</p>  <button>White background</button></div>

Can a CSS variable be used in the recalculation of its own value?

A quick check on the MDN docs unfortunately did not shine light on this. So unless you're willing to dive into the spec, here's a quick test:

:root {  --x: 4em;}
.class2 {  --x: calc(0.5 * var(--x));  font-size: var(--x);}

<div class="class2">  Test - doesn't work as intended</div>

Overriding :root CSS variables from inner scopes

This is a scoping issue. The way you're doing it, you're inheriting --orange from the :root, and --orange in the :root has a lightness of 68%.

In order to change it, you'll want to re-scope the --orange variable to an element that will look up the new --lightness value. There's a few ways to pull this off:

Option 1: duplicate the --orange variable on the element:

:root {  --lightness: 68%;  --orange: hsl(255, 72%, var(--lightness));}.card {  background: var(--orange);  --orange: hsl(255, 72%, var(--lightness));}.card:hover {
  --lightness: 45%;}

<div class="card">  Hello world</div>

How can I assign the value of a css calc() to a css-variable, and not have it delay the calculation until the css-variable is used

I found a "perfect" work around!.

The solution to this is to use the 'resize' event to read the size of the element you wanted use 100% on using getBoundingClientRect(); and using the width returned to set the "calc" as width px - whatever

So for the example in the question I would use this code

_resize() {
    if (this.resizeInProgress) return;
    this.resizeInProgress = true;
    requestAnimationFrame(() => {
        const container = this.shadowRoot.querySelector('.flex');
        const bound = container.getBoundingClientRect();
        container.style.setProperty('--div-width', `calc(${bound.width}px - 10px)`);
        this.resizeInProgress = false;
    });
  }

I bind that function to this in my custom element constructor

this.resizeInProgress = true;
this._resize = this._resize.bind(this);

and this in the connectedCallback do

window.addEventListener('resize', this._resize);
this.resizeInProgress = false;

and in my disconnectedCallback remove it again with

this.resizeInProgress = true;
window.removeEventListener('resize', this._resize);

I retain the calc() function because in my real life cases as the amount subtracted is in "em" units

---

Related Topics