前言
随着 Web 技术的不断发展，前端工程师们也需要不断学习新的技术来跟上潮流。在 CSS 方面，越来越多的新特性也被加入到 CSS 中，如 Grid 布局、Flexbox 等，这些新特性使得我们的开发变得更加高效和方便。本文将介绍一些最近在前端领域中非常流行的技术——PostCSS 和 CSSNext，并通过它们来了解 CSS 的一些新特性。
PostCSS 是什么？
PostCSS 是一种 CSS 处理器，他能够帮助开发者们编写更加优秀且可维护的 CSS 代码。PostCSS 可以使用插件机制来自动化处理 CSS，例如自动添加浏览器前缀、压缩 CSS 文件等等。同时，PostCSS 也支持使用未来版本的 CSS 语法。
下面是一个使用 PostCSS 插件 autoprefixer 来为 CSS 样式自动添加浏览器前缀的例子：
/* 在样式中不需要再手动添加浏览器前缀 */
div {
display: flex;
align-items: center;
}使用 PostCSS 处理后，该样式会被转换为以下代码：
-- -------------------- ---- -------
--- -
-------- ------------
-------- -------------
-------- ------------
-------- -----
-------------------- -------
--------------- -------
------------ -------
-CSSNext 是什么？
CSSNext 是一个开源的 CSS 预处理器，它支持大多数 CSS3 和 CSS4 的新特性。CSSNext 具有类似 Sass 或 Less 的语法，但它更加轻量级，使用起来也更加简单。
下面是一个使用 CSSNext 语法的例子，该例子展示了如何使用 :matches 选择器：
/* 使用 CSSNext 语法中的 :matches 选择器 */
a:matches(:hover, :active) {
color: red;
}使用 CSSNext 处理后，该样式会被转换为以下代码：
/* 转换后的样式代码 */
a:hover,
a:active {
color: red;
}PostCSS 和 CSSNext 的一些新特性
PostCSS 和 CSSNext 支持的一些新特性包括：
Custom Properties (CSS Variables)
CSS 变量允许我们在样式表中定义变量，以便于在其他地方重复使用。在 PostCSS 中，可以使用插件 postcss-css-variables 来支持 CSS 变量功能。
下面是一个使用 CSS 变量的例子：
-- -------------------- ---- -------
-- -- --- -- --
----- -
---------------- --------
-
-- -- --- -- --
------ -
----------------- ---------------------
-Nesting (嵌套) 选择器
嵌套选择器让我们可以更容易地定义层级样式，PostCSS 支持使用插件 postcss-nested 来支持嵌套选择器。
下面是一个使用嵌套选择器的例子：
-- -------------------- ---- -------
-- ----- --
--- -
-- -
------- --
-------- --
----------- -----
-- -
-------- -------------
- -
------ -----
---------------- -----
-------- -----
------- -
-------------- --- ----- ----
-
-
-
-
-Autoprefixer（自动添加浏览器前缀）
Autoprefixer 是 PostCSS 的插件之一，它会根据当前使用的浏览器版本，自动添加相应的浏览
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5153