CSS 变量 - 2022 年学习 CSS 变量

海拥

发布于 2022-04-13 17:26:43

8170

发布于 2022-04-13 17:26:43

文章被收录于专栏：全栈技术全栈技术

你好朋友👋。希望你过得很好？在今天的文章中，我们将讨论 CSS 变量。所以不要浪费时间，让我们看看它是什么？

什么是变量？

变量用于在其中存储数据。把它想象成你有一个盒子，你在里面放了一些书。然后那些书就是数据，而盒子在计算机科学方面是可变的。

好的，但我们为什么要使用它？？

让我们举个例子来理解为什么我们使用变量？

body { background-color: blue; }

h2 { border-bottom: 2px solid blue; }

.container {
  color: white; 
  background-color: white; 
  padding: 15px;
}

button {
  background-color: white; 
  color: blue;  
  border: 1px solid blue; 
}

如果您看到上面的代码，如果我说您不想在网站上显示任何蓝色并将该颜色更改为绿色。即使最后一个代码很短，但仍然要更改颜色，您必须复制并粘贴每条颜色线，对吗？？

因此，对于这种情况，我们使用变量，现在想想如果我们只是制作一个变量“颜色”并将蓝色存储在其中。

并且只需将所有颜色编码为等于该变量而不是“蓝色”。如果我们这样做。现在，我们只需在一行中更改颜色，所有颜色都会自行更改。

是不是很厉害？？？

定义变量

我们通常在:root选择器中定义变量

为什么？如果我们在 root 中声明一个变量，那么我们可以从代码中的任何地方访问它，但是如果您在任何其他元素中定义一个变量，您将能够在 { } 中使用它。这基本上称为范围。

在 :root 中声明变量的语法是

确保变量名必须以 (–) 双破折号开头，并且区分大小写，这意味着“–variable”不等于“–VARIABLE”

访问变量

好的，我们定义了一个变量，但是我们如何访问它。为此，我们在 CSS 中有 var() 函数

因此，现在让我们看一个使用 CSS 变量的完整示例。

:root{
  --primary-color: blue;
  --secondary-color: white;
}

body { background-color: var(--primary-color);  /*blue color*/}

h2 { border-bottom: 2px solid var(--primary-color);  /*blue color*/}

.container {
  color: var(--primary-color); /*white color*/
  background-color: var(--secondary-color); /*white color*/
  padding: 15px;
}

button {
  background-color: var(--secondary-color); /*white color*/
  color: var(--primary-color);  /*blue color*/
  border: 1px solid var(--primary-color); /*blue color*/
}

所以，现在如果你看到上面的代码，你就可以知道如何在 CSS 中使用变量了。现在您只需 1 行即可轻松更改颜色。

您可以使用变量来存储任何 CSS 值。甚至存储整个边界值。是不是很棒？

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-03-19 ，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法