css----自定义属性

定义变量 - -

:root {
  --theme-color: gray;
}

.button {
  background-color: var(--theme-color);
}

定义在父元素内，本元素和所有子节点都可以使用这个变量

.container {
  position: relative;
  --clickX: 0;
  --clickY: 0;
}
.container::after {
  position: absolute;
  transform: translate(var(--clickX, 0), var(--clickY, 0));
}

改变自定义属性的值 el.style.setProperty（attr，value）

const container = document.querySelector('.container');
container.addEventListener('click', evt => {
  container.style.setProperty('--clickX', `${evt.clientX}px`);
  container.style.setProperty('--clickY', `${evt.clientY}px`);
});

计算 calc

:root {
  --image-grid-spacing: 16px;
}

.image-grid {
  padding: calc(var(--image-grid-spacing) / 2);
  width: calc(100% - 16px);
}