Discussion on: CSS Variables

[Dillon Headley]

css vars are awesome. Here's some cool things i've been using them for.

Flexible container widths without having to overwrite the rule:

:root {
  --container-sm: 60rem;
  --container-md: 110rem;
  --container-lg: 126rem;
}


.g-container {
  max-width: var(--container-width, var(--container-md));
  width: calc(100% - var(--container-gap, 2rem));
  margin-left: auto;
  margin-right: auto;
}

...

<article class="c-supportPlans g-container">
...

.c-supportPlans {
  --container-width: var(--container-xl);
  ...
}

Font styles management:

  --muli-1: 800 1.6rem/1.25 'Muli', sans-serif;
  --muli-2: 700 1.4rem/1.25 'Muli', sans-serif;
  --muli-3: 400 1.2rem/2 'Muli', sans-serif;

  --open-sans-1: 800 3.2rem/1.375 'Open Sans', sans-serif;
  --open-sans-2: 400 2.4rem/1.167 'Open Sans', sans-serif;
  --open-sans-3: 800 2rem/1.4 'Open Sans', sans-serif;

...
.c-supportPlans-plan h2 {
  font: var(--open-sans-3);
}

and declarative simple animations:

@keyframes fromTo {
  from {
    transform: var(--from);
  }
  to {
    transform: var(--to);
  }
}

.c-industriesBanner-list {
  --from: translateX(0);
  --to: translateX(calc(-100% + -3rem));
  animation: linear 20s fromTo infinite;
  display: grid;
  grid-gap: 3rem;
  gap: 3rem;
  grid-auto-flow: column;
  grid-auto-columns: 15rem;
}

codepen.io/dillonbheadley/pen/oNXNyPa

fun stuff!

[Samantha Ming]

Thanks for sharing this @dillonheadley . Awesome work! It's always so helpful to see how people implement the tech in their own project. Let me link this in the code notes 👏

[Dillon Headley]

Here's one more to manage buttons with vars: codepen.io/dillonbheadley/pen/PoqWqxq

[Dillon Headley]

For sure! 👍🏼 Love your posts btw!