CSS Variables: width x height = area (1/2)

css-variables-width-x-height-area-1-2.markdown

CSS Variables: width x height = area (1/2)

A Pen by Rplus on CodePen.

License.

index.pug

.workspace
  input#width(type="range" min=0 max=400 value=300)
  input#height(type="range" min=0 max=400 value=200)
  .box

script.babel

let $workspace = document.querySelector('.workspace');
let $box = document.querySelector('.box');
let $width = document.querySelector('#width');
let $height = document.querySelector('#height');

let setWidth = () => {
  $workspace.style.setProperty('--width', `${$width.value}`);
};
let setHeight = () => {
  $workspace.style.setProperty('--height', `${$height.value}`);
};

$width.addEventListener('input', setWidth);
$height.addEventListener('input', setHeight);

setWidth();
setHeight();

style.scss

.workspace {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 400px;
  height: 400px;
  background-color: #ffc;

  #width {
    position: absolute;
    width: 100%;
    transform: translateY(-100%);

    &::after {
      content: 'w: ' var(--width); // ?
      position: absolute;
      top: -2em;
      transform: translateX(calc(-50% + var(--width) * 1px)); // ok
    }
  }

  #height {
    position: absolute;
    width: 100%;
    transform-origin: 0 0;
    transform: rotate(90deg);

    &::after {
      content: 'h: ' var(--height); // ?
      position: absolute;
      top: 2em;
      transform: translateX(calc(-50% + var(--height) * 1px)); // ok
    }
  }

  .box {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--width) * 1px); // ok
    height: calc(var(--height) * 1px); // ok
    background-color: #ff0;
    
    &::before {
      content: calc(var(--width) * var(--height)); // ?
    }
  }
}