如何在 CSS 中使用变量并简化样式

大多数网站使用 CSS 来修饰它们的外观和设计不同的网页组件。 CSS，或层叠样式表，在技术上不是一种编程语言。 但是，CSS 可以与 JavaScript 等编程语言一起使用来创建响应式和交互式网页。

如果您使用过 JavaScript 等编程语言，您就会知道可以声明一个变量，为其赋值并在代码的各个部分重用它。 好消息是您可以在 CSS 中应用相同的概念。

本文将定义 CSS 变量，描述它们的好处，并向您展示如何在 CSS 中声明和使用变量。

什么是 CSS 中的变量？

CSS 变量是允许 Web 开发人员存储可通过样式表重用的值的自定义属性。 例如，您可以声明可与代码库中的标题、段落和 div 等元素重用的字体样式、背景颜色和字体大小。

为什么要使用 CSS 变量？ 这些是一些原因；

• 更容易更新代码：一旦声明了变量，就可以重用整个样式表，而无需手动更新每个元素。
• 减少重复：随着你的代码库的增长，你会发现你有相似的类和元素。 您无需为每个项目编写 CSS 代码，只需使用 CSS 变量即可。
• 使您的代码更易于维护：如果您希望您的业务持续经营，代码维护很重要。
• 提高可读性：现代世界鼓励协作。 在 CSS 中使用变量会产生可读的紧凑代码库。
• 易于保持一致性：CSS 变量可以帮助您在源代码增长或应用程序大小增加时保持一致的样式。 例如，您可以声明要在整个网站的按钮中使用的边距、填充、字体样式和颜色。

如何在 CSS 中声明变量

由于您了解 CSS 中的变量是什么以及为什么要使用它们，我们可以继续说明如何声明它们。

要声明 CSS 变量，请以元素的名称开头，然后写上两个破折号 (–)、所需的名称和值。 基本语法是；

element {

--variable-name: value;

}

例如，如果您想在整个文档中应用填充，您可以将其声明为；

body { 

--padding: 1rem;

}

CSS 中变量的作用域

CSS 变量的作用域可以是局部的（可在特定元素内访问）或全局的（可在整个样式表中访问）。

局部变量

局部变量被添加到特定的选择器。 例如，您可以将它们添加到按钮中。 这是一个例子；

.button {

    --button-bg-color: #33ff4e;

  }

背景颜色变量在按钮选择器及其子项上可用。

全局变量

声明后，您可以将全局变量用于代码中的任何元素。 我们使用 :root 伪类来声明全局变量。 这就是我们声明它们的方式；

:root {

    --primary-color: grey;

    --secondary-color: orange;

    --font-weight: 700:

  }

在上面的代码中，您可以使用任何用不同元素声明的变量，例如标题、段落、div，甚至整个正文。

如何在 CSS 中使用变量

我们将创建一个用于演示目的的项目并添加 index.html 和 styles.css 文件。

在 index.html 文件中，我们可以有一个简单的 div，其中包含两个标题（h1 和 h2）和一个段落 (p)。

<div>

      <h1>Hello Front-end Dev!!!!</h1>

      <h2>This is how to use variables in CSS.</h2>

      <p> Keep scrolling</p>

    </div>

在 style.css 文件中，我们可以有以下内容；

:root {

    --primary-color: grey;

    --secondary-color: orange;

    --font-weight: 700:

    --font-size: 16px;

    --font-style: italic;

  }

  body {

    background-color: var(--primary-color);

    font-size: var(--font-size);

  }

  h1 {

    color: var(--secondary-color);

    font-style: var(--font-style)

  }

  h2 {

    font-weight: var(--font-weight)

  }

  p {

    font-size: calc(var(--font-size) * 1.2);

  }

呈现网页时，我们将拥有以下内容；

从上面的代码中，我们在 :root 元素中声明了全局变量。 我们必须使用 var 关键字在我们的任何元素中使用全局变量。 例如，要应用我们声明为全局变量的背景颜色，我们的代码如下：

背景色：var(–primary-color)；

检查所有其他元素，您会注意到 var 关键字的应用趋势。

在 JavaScript 中使用 CSS 变量

我们将使用局部变量和全局变量来说明如何在 JavaScript 中使用 CSS 变量。

我们可以在现有代码中添加一个警报元素；

我们新的 index.html 文件如下；

<div>

      <h1>Hello Front-end Dev!!!!</h1>

      <h2>This is how to use variables in CSS.</h2>

      <p> Keep scrolling</p>

    </div>

    <div class="alert">Click me!</div>

我们可以设置变量的样式。 将以下代码添加到您现有的 CSS 代码中；

.alert {

    --bg-color: red; /* Define local variable */

    background-color: var(--bg-color); /* Use the local variable for the background color */

    padding: 10px 20px;

    border-radius: 4px;

    font-weight: var(--font-weight); /*Use the global variable for font weight*/

    width: 50px;

  }

我们做了以下工作；

• 在 alert 元素中定义了一个局部变量；

–背景颜色：红色

• 使用 var 关键字访问这个局部变量；

背景色：var(–bg-color)；

• 使用我们之前声明的全局变量作为我们的字体粗细；

字体粗细：var（–字体粗细）；

添加 JavaScript 代码

我们可以让我们的 alert 元素响应； 当你点击它时，你会在浏览器上看到一个弹出窗口，上面写着； “我们在 JavaScript 中使用了 CSS 变量！！！”。

我们可以将 JavaScript 代码直接添加到 HTML 代码中，方法是使用