如何在CSS中写变量？一文带你了解前端样式利器

本文介绍: 引言前端的变量写法大致可以分为三大类，分别是CSS-in-JS，CSS预处理器，和CSS原生变量。作为前端开发人员，我们应该了解并善用它们，以便实现更加灵活、可维护的样式。本篇文章将与大家分享一下原生CSS的变量写法概念CSS变量也叫自定义属性，在它出现之前，CSS中使用的值通常是硬编码的（静态编写），这导致了样式代码的重复和冗余，在管理和维护大型项目时存在一些困扰和隐患

引言

概念

语法

基本用法

使用场景

全局变量

局部变量

编辑

媒体查询变量

动态定义

继承变量

自变量

与其他方案的区别

使用方式上

作用域的区别

编译产物

功能及拓展

总结

写在最后

引言

前端的变量写法大致可以分为三大类，分别是CSS-in-JS，CSS预处理器，和CSS原生变量。作为前端开发人员，我们应该了解并善用它们，以便实现更加灵活、可维护的样式。本篇文章将与大家分享一下原生CSS的变量写法

概念

CSS变量也叫自定义属性，在它出现之前，CSS中使用的值通常是硬编码的（静态编写），这导致了样式代码的重复和冗余，在管理和维护大型项目时存在一些困扰和隐患

为了解决这个问题，CSS变量被引入到CSS规范中，使开发者能够声明并重复使用可自定义的样式属性。通过定义和使用变量，我们可以对样式集中管理，减少代码的冗余，提高维护性

语法

在CSS中，使用”–“前缀定义一个变量，例如：–var i a ble。可以在:root 伪类中定义变量实现全局作用域，也可以在特定选择器中定义变量以限定作用域。

定义完成后使用var()函数调用变量，并将变量名作为参数传递，例如：var(–var i a ble)。在需要应用变量的地方，使用var(–var i a ble)替代具体的数值或属性值。

基本 用法

下面是一个全局变量定义以及使用示例

&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;title&gt;</title>
    <style>
      :root {
        --primary-color: lightblue;
        --primary-font: 20px;
      }
      .theme1 {
        width: 100px;
        height: 100px;
        background: var(--primary-color);
        font-size: var(--primary-font);
      }
    </style>
  </head>
  <body>
    <div class="theme1"></div>
  </body>
</html>

使用场景

全局变量

使用:ro ot选择器可以选中根节点，结合CSS变量可以将变量定义在全局，它有最高优先级，所有元素都可以访问这些变量。正如上面的示例

:root {
  --primary-color: lightblue;
}
.theme1 {
  background: var(--primary-color);
}

局部变量

局部变量（又叫块级变量）的使用范围就比较广了，几乎所有选择器都可以声明变量。下面举几个例子

在类选择器中定义变量，在子标签中使用

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      .theme1 {
        --primary-color: lightblue;
      }
      .theme1 > span {
        color: var(--primary-color);
      }
    </style>
  </head>
  <body>
    <div class="theme1">
      <span>hello</span>
    </div>
  </body>
</html>

给html 设置主题属性，在其他标签中使用。这里我借助JS实现了一个简单的主题切换功能

<!DOCTYPE html>
<html theme="theme1">
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      [theme="theme1"] {
        --primary-color: lightblue;
        --primary-font-size: 20px;
      }
      [theme="theme2"] {
        --primary-color: lightcoral;
        --primary-font-size: 30px;
      }
      .theme > span {
        color: var(--primary-color);
        font-size: var(--primary-font-size);
      }
    </style>
  </head>
  <body>
    <button onclick="changeTheme()">切换主题</button>
    <div class="theme">
      <span>hello</span>
    </div>
    <script>
      const html = document.querySelector("html");
      function changeTheme() {
        if (html.getAttribute("theme") === "theme1")
          return html.setAttribute("theme", "theme2");
        html.setAttribute("theme", "theme1");
      }
    </script>
  </body>
</html>

效果如下

媒体 查询变量

在媒体查询的条件下，我们也可以通过声明CSS变量来达到样式动态更新的效果

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      @media (min-width: 300px) {
        :root {
          --primary-color: lightblue;
          --primary-font-size: 20px;
        }
      }
      @media (min-width: 600px) {
        :root {
          --primary-color: lightcoral;
          --primary-font-size: 30px;
        }
      }
      .theme > span {
        color: var(--primary-color);
        font-size: var(--primary-font-size);
      }
    </style>
  </head>
  <body>
    <div class="theme">
      <span>hello</span>
    </div>
  </body>
</html>

运行上述代码后效果是这样的

动态 定义

此外我们可以通过 element.setPro perty的方式对变量值进行动态修改，称为动态定义，操作如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      :root {
        --primary-color: lightblue;
        --primary-font-size: 20px;
      }
      .theme > span {
        color: var(--primary-color);
        font-size: var(--primary-font-size);
      }
    </style>
  </head>
  <body>
    <button onclick="changeTheme()">切换主题</button>
    <div class="theme">
      <span>hello</span>
    </div>
    <script>
      const dom = document.documentElement;
      const { style } = dom;
      const colorKey = "--primary-color";
      function changeTheme() {
        const primaryColor = getComputedStyle(dom).getPropertyValue(colorKey);
        // 格式化后样式有空格
        if (primaryColor.includes("lightblue"))
          style.setProperty(colorKey, "lightcoral");
        else style.setProperty(colorKey, "lightblue");
      }
    </script>
  </body>
</html>