变量的引进，更强大的CSS

随着微软宣布 Edge 浏览器将支持 CSS 变量，这个重要的 CSS 新功能，所有主要浏览器已经都支持了。本文全面介绍如何使用它，你会发现原生 CSS 从此变得异常强大。

首先，变量在定义的时候，名字前面要加两根连词线（--）。

比如：

--font-size: 16px;

然后，我们就可以在任何 CSS 属性的值中使用这个变量了，比如：

h1 {
  font-size: var(--font-size);
}

这样一来，我们就不用在每个地方都重复写字体大小了，只要修改一下 --font-size 变量，所有使用这个变量的地方都会自动更新。

当然，CSS 变量还可以做更多的事情。比如，我们可以使用它来创建主题。

我们先定义一个变量 --theme-color，然后在不同的页面上使用不同的颜色值来给这个变量赋值。这样一来，我们就可以轻松地改变整个网站的配色方案了。

/* light theme */
:root {
  --theme-color: #ffffff;
}

/* dark theme */
:root {
  --theme-color: #000000;
}

我们也可以使用 CSS 变量来创建响应式设计。比如，我们可以定义一个变量 --viewport-width，然后根据视口的宽度来给这个变量赋值。这样一来，我们就可以让我们的布局随着视口的宽度而变化。

@media (max-width: 768px) {
  :root {
    --viewport-width: 320px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --viewport-width: 768px;
  }
}

@media (min-width: 1025px) {
  :root {
    --viewport-width: 1024px;
  }
}

总之，CSS 变量是一个非常强大的功能，它可以让我们在前端开发中做很多事情。如果你还没有使用过 CSS 变量，那么我强烈建议你尝试一下。

CSS 变量的优势：

• 维护性好：CSS 变量可以让我们在整个样式表中重用CSS值，从而使样式表的维护和更新变得更加容易。
• 可扩展性强：CSS 变量可以让我们轻松地创建主题和响应式设计，从而使我们的网站更加灵活和可扩展。
• 性能好：CSS 变量可以减少浏览器的渲染时间，从而提高网站的性能。

CSS 变量的局限性：

• 浏览器支持：虽然目前所有主流浏览器都支持 CSS 变量，但旧版本的浏览器可能不支持。
• 兼容性问题：在某些情况下，使用 CSS 变量可能会导致兼容性问题。

尽管存在一些局限性，但 CSS 变量仍然是一个非常强大的功能。如果你想让你的网站更加强大和灵活，那么我强烈建议你使用 CSS 变量。