Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS Variables: width x height = area (1/2)
.workspace
input#width(type="range" min=0 max=400 value=300)
input#height(type="range" min=0 max=400 value=200)
.box
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();
.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)); // ?
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment