前言

在复杂的网站中，一定会有大量的CSS代码！通常也会有很多重复的CSS代码，例如颜色值，border值！为了样式的统一同样的一个颜色可能会被使用几十百次！如果我们想要更待颜色的主题，我们可能需要全局搜索，并且一个一个的替换。

在程序中定义一个变量有助于我们存储和修改。我们可以通过一次更改轻松更改变量的值。变量在许多情况下都有帮助。

CSS 确实支持变量声明，今天我们将详细了解变量声明和使用。

所以让我们开始吧。

定义变量

我们可以声明一个具有两个作用域的变量，即global和local。global可以在整个文档中访问使用范围声明变量。使用 时local，它被限制在选择器内。

全局变量

全局变量在一个特殊的选择器中声明: root。在选择器中，我们将变量定义为双连字符 (–)，后跟变量名称。后面的属性值是CSS里面的所有有效的值，例如rgb颜色值#颜色值！

  :root{
  --background: #f1f7fe;
  --boderRadius: 10px;
}

局部变量

局部变量将在同一个选择器中定义和使用。

     --background: #f1f7fe;
    background-color: var(--background);

您可以在文档中将此变量与var()函数一起使用。您需要在括号内提供变量的名称。

  body{
  background-color: var(--background);
}

覆盖变量

您可以覆盖，即更改选择器中变量的值。该值将在定义它的同一选择器中有效。

:root{
  --background: #f1f7fe;
  --boderRadius: 10px;
}

div{
  --background: #DD4847;
  background-color: var(--background)
}

JavaScript 中的 CSS 变量

CSS 变量可以在 javascript 中访问和修改。它可以通过查询选择器访问。

let element = document.querySelector(':root')

您可以使用功能获取属性的值getPropertyValue()。

let background = element.getPropertyValue('--background')

您可以使用函数更改此变量的值style.setProperty()。它采用逗号（，）分隔的引号内的两个值。第一个值是变量的名称，第二个是更新后的值。

element.style.setProperty()

例子

我们将通过单击按钮来更改网站的调色板。更改颜色将在 javascript 中完成。

index.html

我们有两个容器。一个用于我们的调色板，另一个用于按钮。

<div class="container">
        <div class="circle two"></div>
        <div class="circle three"></div>
        <div class="circle four"></div>
    </div>
    <div>
        <button id="palette1" onclick="palette1()">Color 1</button>
        <button id="palette2" onclick="palette2()">Color 2</button>
        <button id="palette3" onclick="palette3()">Color 3</button>
        <button id="palette4" onclick="palette4()">Color 4</button>
    </div>

style.css

我们已经使用 CSS 变量来定义和使用样式表中的变量来定义我们网页的调色板。

:root {
  --one: #f9ed69;
  --two: #f08a5d;
  --three: #b83b5e;
  --four: #6a2c70;
}

javaScript.js

当用户单击按钮时，我们将更改变量的值。

var element = document.querySelector(":root")

console.log("HEELO WORLD")

const palette1 = () => {

    element.style.setProperty('--one', '#f9ed69')
    element.style.setProperty('--two', '#f08a5d')
    element.style.setProperty('--three', '#b83b5e')
    element.style.setProperty('--four', '#6a2c70')
}

最后注

这就是现在的 CSS 变量。我希望你会尝试在你的 CSS 中使用变量。