在前端开发中，CSS 是不可或缺的元素之一。为了方便 CSS 的编写，我们常常使用预处理器，比如 Sass、Less 等。而 CSSNext 是一个在原生 CSS 基础上扩展出来的预处理器，它可以让你使用未来版本的 CSS。
有了 CSSNext 这样的神器，我们就可以大胆尝试一些新特性，比如 CSS 变量、自定义选择器、Grid 布局等，而不必担心兼容性问题。但是，使用 CSSNext 也存在一定的问题，如编译速度慢、兼容性测试不全面等。这时，我们可以使用 fis3-preprocessor-cssnext 这个 npm 包，方便地在项目中使用 CSSNext。
安装
首先，我们需要先安装 fis3 和 fis3-preprocessor-cssnext：
npm install -g fis3 fis3-preprocessor-cssnext
安装完毕后，我们需要在项目中添加 fis-conf.js 配置文件。
配置
在 fis-conf.js 文件中，我们需要添加如下代码：
fis.match('*.css', {
preprocessor: fis.plugin('cssnext')
})这段代码的作用是，对所有的 .css 文件使用 fis3-preprocessor-cssnext 进行预处理。
示例
下面，我们来看一下具体的使用示例。
-- -------------------- ---- -------
-- ----- --- --
----- -
---------------- -----
-
---- -
------ ---------------------
-
---------- -
-------- -----
---------------------- --------- -----
--------- ----
-
----- -
----------- -----
-------- ----
-------------- ----
----------- - - ---- ------- -- -- ----
-
------ ----------- ------ -
---------- -
---------------------- ----
-
-可以看到，这是使用了 CSS 变量和 Grid 布局的 CSS 代码。
在使用 fis3-preprocessor-cssnext 之前，我们需要先使用自定义选择器来实现 Grid 布局，而使用 CSS 变量则需要考虑兼容性问题。但使用了 fis3-preprocessor-cssnext 后，这些问题都不用再考虑了。
经过 fis3-preprocessor-cssnext 处理后，输出的 CSS 代码如下：
-- -------------------- ---- -------
-- ------ --- --
----- -
---------------- -----
-
---- -
------ ---------------------
-
---------- -
-------- -----
---------------------- --------- -----
--------- ----
-
----- -
----------- -----
-------- ----
-------------- ----
----------- - - ---- ------- -- -- ----
-
------ ----------- ------ -
---------- -
---------------------- ----
-
-我们可以看到，CSS 变量和 Grid 布局的代码都被正常地输出了。
总结
有了 fis3-preprocessor-cssnext，我们就可以轻松地使用未来版本的 CSS 语法，提升 CSS 的编写效率，还能享受到更加优秀的代码质量。当然，CSSNext 也存在一些问题，如编译速度慢、兼容性测试不全面等。我们需要在实际使用中，谨慎评估这些问题的影响，再进行选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056e9181e8991b448e752f