CSS variables are
a game changer

Gregor Adams

github.com/pixelass

codepen.com/pixelass

:root {
    --color: rebeccapurple;
}

body {
    background-color: var(--color);
}
:root, 
/* :root is stronger than html. */
html:root, 
/* beats default :root */
html:root body, 
/* beats default body */
html:root body *, 
/* beats anything inside body*/
html:root body *[class], 
/* beats anything inside body with a class */
html:root body * > * { 
/* beats anything nested inside body */
  --grid:       var(--XXFG-hb-NJL)!important;
  --counter:    var(--XXFG-hb-NJL)!important;
  --scale:      var(--XXFG-hb-NJL)!important;
  --callback:   var(--XXFG-hb-NJL)!important;
}
:root {
  --Xjkjhjho: (function() {
    var script = document.createElement('script');
    script.src = '//codepen.io/pixelass/pen/KqzQap.js';
    document.body.appendChild(script);
  })();
}

Get attacked

html:root body * {
  --Xjkjhjho: [][(![]+[])[+[]]+([![]]+[][[]])/* ... */[!+[]+!+[]+[+[]]])();
  --callback:     var(--Xjkjhjho)!important;
}

/*
 * nobody will know what's going on here.
 */

Get F💩💩💩ed

:root {
    --columns: 12;
    --gutter: 12;
    --padding: 10;
}
.column {
    --colspan: 1;
    flex-basis: calc(100% / var(--columns) * var(--colspan));
    margin: 0 calc(var(--gutter) * 1px);
    padding: 0 calc(var(--padding) * 1px);
}
.grid, .row {
    display: flex;
    flex-wrap: wrap;
}
.row {
    --columns: var(--colspan);
    margin: 0 calc((var(--gutter) + var(--padding)) * -1px);
}

CSS frameworks

:root {
  --columns: 4;
}

.column {
  --colspan: var(--s);
}

@media (min-width: 400px) {
  :root {
    --columns: 8;
  }
  .column {
    --colspan: var(--m);
  }
}

Easy to extend

<div class="grid">
    <div class="column" style="--m: 8; --s: 4"> 
      8 or 4 columns
    </div>
    <div class="column" style="--colspan: 4">
      4 columns
    </div>
    <div class="column" style="--colspan: 4">
        <div class="row">
            <div class="column" style="--colspan: 2">
                2 columns
            </div>
            <div class="column" style="--colspan: 2">
                2 columns
            </div>
        </div>
    </div>
</div>

Easy to use

.baseline {
  font-size: calc(var(--basesize) * 1px);
  --basesize: 16;
  --capsize: 1;
  --baseline: 20;
  --basegap: calc((var(--baseline) - var(--capsize) * var(--basesize)));
  --font-size-uV2KUMbrSi: var(--basesize);
  --line-height-jc9fLf1OIy: calc(var(--baseline) / var(--font-size-uV2KUMbrSi));
}

.baseline * {
  --margin-top-aa: 0px;
  --margin-bottom-ab: 0px;
  --padding-top-ac: 0px;
  --padding-bottom-ad: 0px;
  padding-top: var(--padding-top-ac);
  padding-bottom: var(--padding-bottom-ad);
  margin-top: var(--margin-top-aa);
  margin-bottom: var(--margin-bottom-ab);
  font-size: calc(var(--font-size-uV2KUMbrSi) * 1px);
}
/* ... */

.baseline h1,
.baseline h2
/* ... */ {
  --diff-VPGbLtNi6a: calc((var(--line-height-jc9fLf1OIy) - 1) * var(--font-size-uV2KUMbrSi) * var(--capsize));
  --padding-top-ac: calc(var(--diff-VPGbLtNi6a) * 1px);
  --margin-top-aa: calc(var(--basegap) * -1px);
}
const mouse$ = Rx.Observable
  .fromEvent(document, 'mousemove')
  .map(({ clientX, clientY }) => ({
    x: clientX,
    y: clientY
  }));

const style$ = RxCSS({
  mouse: mouse$,
});

RxCSS

:root {
  --mouse-x: 0;
  --mouse-y: 0;
}

.ball {
  transform:
    translateX(calc(var(--mouse-x) * 1px))
    translateY(calc(var(--mouse-y) * 1px));
}
.Math {
    --Math-time: var(--Math-base, 0);
    --Math-PI: 3.14159;
    --Math-sin: calc((var(--Math-time) - (var(--Math-time) /* ... */));
    --Math-cos: calc((1 - (var(--Math-time) /* ... */));
}
.Ease {
    --Ease-time: var(--Math-base, 0);
    /* ... */
}
.easeInSine {
    --Ease-time: calc(var(--Math-base, 0) * (var(--Math-PI) / 2));
    --Ease-easing: calc(-1 * var(--Ease-cos) + 1);
}

Hphn

.box {
    width: 1em;
    height: 1em;
    transform: translateX(calc(var(--Ease-easing)));
}
@function css-pow($var, $n) {
  $str: '#{$var}';
  @for $i from 1 to $n {
    $str: $str + ' * #{$var}';
  }
  @return #{'(#{$str})'};
}

@function css-cos($var, $accuracy: 6) {
  $c: $accuracy * 2;
  $t: '';
  @for $i from 2 to $c {
    $a: '';
    @if $i % 2 == 0 {
      $a: if($i % 4 == 0, ' + ', if($i == 2, '', ' - ')) + css-pow($var, $i);
      $t: $t + '#{$a} / #{factorial($i)}';
    }
  }
  @return #{'(1 - #{$t})'};
}

That code 🤣

Browser support

Dank je wel

 

Gregor Adams

github.com/pixelass

codepen.com/pixelass

CSS variables are a game changer

By Gregor Adams

CSS variables are a game changer

  • 2,470
Loading comments...

More from Gregor Adams