css使用变量_为什么要使用CSS变量[初学者指南]

css使用变量

介绍

您可能已经听说过CSS中变量的使用。 这是许多程序员要求的功能，终于在这里。 问题是为什么只有少数人使用它，为什么它在初学者中不那么受欢迎。

在本文中，我们将回答这些问题，并向您展示一个简单的示例，说明如何使用它，甚至值得一读。

变数

与编程语言无关，变量只是用于存储信息以供以后使用的容器，它们可以帮助我们为数据指定一个描述性名称，以提高代码的可读性。

我们在CSS中使用变量的原因与在其他任何编程语言中使用它们的原因相同：易于修改，简化，添加描述等。

重要性

在大中型应用程序上工作时，CSS会变得非常混乱和丑陋，而这是您要更改功能时的噩梦。 由于许多属性值都是重复的，因此您必须找到每个属性值并进行必要的更改。

使用CSS变量，您只需更改该变量，使用该变量的所有其他属性名称都将被修改。

让我给你演示。

首先，声明变量：

:root {
  --bgcolor : #ffffd0 ;
  --headerfontsize : 40px ; 
}

现在，您可以将CSS名称中的变量用作属性值，从而使用上面声明的变量。 例如：

h1 .top {
  color : red;
  background-color : var (--bgcolour); 
}

如果使用该变量具有不同的属性名称，则只需修改定义该变量的值，然后将修改使用该变量的整个文档。

如您所见，它并不那么复杂。

为什么有几个人使用它？

作为人类，我们倾向于避免我们不太了解的事情，我们只是不想改变做事的方式，尤其是当我们愿意以某种方式或使用特定的工具或方法来做某事时。

这是我们抵抗变化的自然本性。

您是否曾经想过，为什么即使您的朋友或同事告诉您其他可能会更好的方法，您为什么也不能停止做您自己的事情呢？ 您只是不想接受它。

例如，尝试更改代码编辑器。

人们为什么不使用CSS变量也是如此。 由于初次学习CSS的想法并不普遍，因为您不会意识到它的重要性，因此您习惯了以某种方式（没有CSS变量）对元素进行样式设置。

但是，当您开始构建更大的应用程序时，您会意识到，尝试将许多选择器的边距更改为某个值是一个维护噩梦。

有些人可能在想-为什么不只是进行全局搜索。 是的，行得通！ 但是，由于CSS属性值不区分大小写，因此您可能找不到全部。 一个例子是与颜色代码： #ccc ， #CCC ， #CCCCCC都是有效的，并且是相同的颜色，但全球搜索将无法检测到所有的人。

SASS是另一种解决方案，如果您有一些时间编程，可能会听说过SASS ，很多开发人员将其描述为类固醇上CSS 。 是的，SASS很酷，但是它需要一些额外的设置，这可能会使初学者感到恐惧，而CSS变量是内置在CSS3中的。

随便用

您可能会说我不构建大型应用程序，所以我不需要它。 好吧，如果您的目标是在大型组织中工作，那么您肯定会在大型应用程序上工作或维护一个应用程序。

现在开始练习。

正如他们所说的，实践是完美的！

翻译自: https://hackernoon.com/why-you-should-use-css-variables-beginners-guide-4z9x36qw

css使用变量