[CSS] Use CSS Variables Almost like Boolean Values with Calc (maintainable css)

In this lesson, we explore how you can use CSS variables almost like Boolean values in combination with calc().

By setting a variable to 1 or 0 and then using logical operators, we can abstract and decouple areas of our CSS. This can ease maintenance when our CSS starts to get complicated. In this example, we walk through how a variable could be used to dictate part of an element's transform.

<img class="transformed" src="https://assets.codepen.io/605876/avatar.png" />
<img src="https://assets.codepen.io/605876/avatar.png" />

 

img {
  height: 25vmin;
  --rotation: calc(var(--transformed) * 90deg);
  --translation: calc(var(--transformed) * -100%);
  --skew: calc(var(--transformed) * 20deg);
  transform: rotate(var(--rotation, 0deg)) scale(var(--scale)) translate(var(--translation, 0), 0) skew(var(--skew, 0));
}

img:nth-of-type(1) {
  --transformed: 1;
  --scale: 0.5;
}
img:nth-of-type(2) {
  --scale: 0.75;
}

 

All the variable in img is depended on '--transofrmed: 1' variable

  --rotation: calc(var(--transformed) * 90deg);
  --translation: calc(var(--transformed) * -100%);
  --skew: calc(var(--transformed) * 20deg);

 

This is a good way to wirte maintainable css code