1.变量的声明

• 给变量前加两个连词线：--height-bigger: 100px;
• 变量的值可以为许多值，其中包括#ffff00，rgb(255,255,0)，purple，10px，10s，center，
• 变量名对于大小写是敏感的，--height-bigger与--height-Bigger是两个不同的变量

2.变量的读取：var()函数

• 给要使用变量的地方使用var()函数读取：background-color: var(--bg-color);
• var()函数的第二个参数，表示变量的默认值，即找不第一个参数的变量时使用后面的默认值
• 可用在变量声明时读取另一个变量以设置要设置的变量：--primary-color: red;     --logo-text: var(--primary-color);

3.变量值的类型

• 若变量值的类型是字符串，那么可以与其他字符串连接
• 但如果值是数值，后不能直接接单位，应用calc()函数连接：--top: 20;    padding-top: calc(var(--top) * 1px); 而直接书写为padding-top: var(--top)px;是错误的

<style>
      body{
        --bg-color: #E5E8ED;
        --height-bigger: 100px;
        --font-color: #C864C8;
        --font-position: center;
        --primary-color: red;
        --logo-text: var(--primary-color); /*声明变量时使用var()函数*/
        --top: 20; /*配合单位使用*/

      }
      .useColorWhite{
        width: 300px;
        height: var(--height-bigger);
        padding-top: calc(var(--top) * 1px);
        background-color: var(--bg-color);
        color: var(--font,#ff0000);  /*设置了默认值 */
        text-align: var(--font-position);
      }
      .red{
        background-color: #ccc;
        color: var(--logo-text);
      }
    </style>

<div class="useColorWhite">这是一个使用了css变量的小框框。</div>
<div class="red">为了验证在变量声明时期使用的var函数</div>

补充：calc()函数

为css3新增属性，()可以进行四则运算用来动态计算数值。

• calc()函数支持 "+", "-", "*", "/" 运算；
• calc()函数使用标准的数学运算优先级规则；

4.对于同一个变量的优先级问题

• 同一个变量可以在不同选择器中声明，在读取的时候，优先级按照css的优先级是相同的，优先级最高的生效

     <style>
      /* 为了显示优先级 */
      body { --color: blue; }
      div { --color: green; }
      #choose { --color: red; }
      * { color: var(--color); }
    </style>

    <p>颜色是蓝色</p>
    <div>颜色是绿色</div>
    <div id = "choose">颜色是红色</div>

webkit的浏览器给p标签默认加了伪元素所以是上面显示的那样。