css变量

:root {
  --main-color: #06c;
}

#foo h1 {
  color: var(--main-color);

css自定义变量优点

遵循css层叠标准，适合响应式设计中media query里面的变量

:root {
  --gutter: 4px;
}

section {
  margin: var(--gutter);
}

@media (min-width: 600px) {
  :root {
    --gutter: 16px;
  }
}  

可以继承

:root {
  --primary-color: red;
  --logo-text: var(--primary-color);
}


var(<custom-property-name> [, <declaration-fallback-value> ]? )


.foo {
  --gap: 20;
  margin-top: calc(var(--gap) * 1px); /* niiiiice */
}

working with js

/* CSS */
:root {
  --primary-color: red;
  --secondary-color: blue;
}

p {
  color: var(--primary-color);
}


<!-- HTML -->
<p>I’m a red paragraph!</p>


/* JS */
var styles = getComputedStyle(document.documentElement);
var value = String(styles.getPropertyValue('--primary-color')).trim();
// value = 'red'
document.documentElement.style.setProperty('--primary-color', 'green');
document.documentElement.style.setProperty('--primary-color', 'var(--secondary-color)');