Skip to content

Instantly share code, notes, and snippets.

@kapnak
Last active July 5, 2021 12:43
Show Gist options
  • Select an option

  • Save kapnak/81238e88c8f0c4503b44bfa4d304b87d to your computer and use it in GitHub Desktop.

Select an option

Save kapnak/81238e88c8f0c4503b44bfa4d304b87d to your computer and use it in GitHub Desktop.
Who said CSS has no dynamic condition?

What do you think about that ? Is tricky or bad ?

It can be usefull to edit multiple css properties in javascript with just change a variable.

<div id="red"></div>
<div id="blue"></div>
<style>
:root {
--TRUE: initial;
--FALSE: 0;
--show-red: var(--TRUE);
}
#red {
/* Display block if TRUE else hide the div */
display: var(--show-red, block);
height: 50px;
width: 50px;
background-color: red;
}
#blue {
/* Make div height 50px if show red div else 100px */
height: calc((2 - var(--show-red, 1)) * 50px);
width: 50px;
background-color: blue;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment