.parent {
    /*  定义变量  */
    --parent-color: #ff0000;
    --child-color: #fff000;
    --child2-color: blue;
    /* 变量的作用域就是它所在的选择器的有效范围，所以.parent 读取不到 child 中的变量  */
  }

  .child {
    /*  通过 var 读取变量  */
    color: var(--parent-color);
  }
  .child2{
    color: var(--child-color);
  }
  .child3{
    color: var(--child2-color);
  }

<div class="parent">
  I am Parent
  <div class="child">
    I am Child
  </div>
  <div class="child2">
     I am Child2
  </div>
  <div class="child3">
     I am Child3
  </div>
</div>