CSS自定义变量

 试想下在复杂的项目中，CSS样式会不断累加，看到纯数值的属性值，我们很难理解它们的含义，如果我们可以给它们取一个变量名来表示它们的含义，这样更加便于我们理解和复用，于是就有了CCS变量的出现。

如何使用它呢？

在定义变量时一定要添加--前缀，在使用它时需要使用var()函数，并且它也有作用域范围，如果需要设置全局作用域，我们可以在html标签上定义变量，如果要设置局域变量，我们需要在作用范围的上代选择器定义变量，演示代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <style>
      html {
        --color-default: red;
        color: var(--color-default);
      }
      .two {
        --color-default: green; // 改变了属性值变量的值
        color: var(--color-default);
      }
    </style>
  </head>
  <body>
    <p class="one">paragraph one</p>
    <p class="two">paragraph two</p>
  </body>
</html>

 

posted @ 2020-12-16 16:02  xqcokid  阅读(95)  评论(0)  编辑  收藏  举报