css变量

全局使用

<p class="test_aa">全局使用的文字</p>
css：:root{--red_color:red;}
     .test_aa{color:var(--red_color)} 

局部使用

<p class="test_bb">局部使用的文字</p>
css：.test_bb{--red_color:red;}
     .test_bb{color:var(--red_color)} 
*：css代码只能在“test_bb”里使用

响应式布局使用

<p class="test_cc">响应式布局使用的文字</p>
:root {
  --main-font-size: 16px;
}
media all and (max-width: 600px) {
  :root {
    --main-font-size: 12px;
  }
}
*：可以根据屏幕的宽度来改变变量的值

JavaScript 如何访问 CSS 变量

var root = document.querySelector(':root');
var rootStyles = getComputedStyle(root);
var mainColor = rootStyles.getPropertyValue('--main-color');
console.log(mainColor);  --> '#ffeead'
更新变量： root.style.setProperty('--main-color', '#88d8b0')