CSS 类名变量

在编写 CSS 样式表时，我们经常会使用类名来定义不同的样式。但是，当我们的网站或应用程序规模变得越来越大时，管理这些类名可能会变得困难。为了更好地管理和组织我们的 CSS 样式，可以使用 CSS 变量来定义类名。

CSS 变量允许我们在不同的样式规则中共享值，并且可以在 CSS 文件中轻松更改这些值。在本文中，我们将学习如何使用 CSS 变量来定义类名，以便更好地组织和管理我们的样式。

定义 CSS 变量

在开始使用 CSS 类名变量之前，我们首先需要定义变量。CSS 变量以 -- 开头，其命名规则与普通的 CSS 类名类似，只不过前面多了两个连字符。

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --font-size: 16px;
}

在上面的代码中，我们使用 :root 伪类来定义全局的 CSS 变量。在这里，我们定义了三个变量：--primary-color、--secondary-color 和 --font-size，分别表示主要颜色、次要颜色和字体大小。

使用 CSS 类名变量

一旦我们定义了 CSS 变量，就可以在 CSS 类名中使用这些变量。例如，我们可以定义一个类名 .button，并使用定义的颜色变量作为按钮的背景颜色：

.button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

.secondary-button {
  background-color: var(--secondary-color);
}

在上面的代码中，我们使用 var() 函数来引用之前定义的 CSS 变量。这样，我们就可以轻松地更改按钮的背景颜色，而无需修改每个具体的样式。

示例代码

下面是一个完整的示例代码，演示了如何使用 CSS 变量定义和应用类名：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Class Variables</title>
<style>
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --font-size: 16px;
}

.button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

.secondary-button {
  background-color: var(--secondary-color);
}

.text {
  font-size: var(--font-size);
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

</style>
</head>
<body>
<div class="container">
  <button class="button">Primary Button</button>
  <button class="button secondary-button">Secondary Button</button>
  <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</body>
</html>

在上面的示例代码中，我们定义了两个按钮类名 .button 和 .second-button，并应用了定义的颜色变量。我们还定义了一个文本类名 .text，并应用了定义的字体大小变量。