如何使用PostCSS构建自己的CSS预处理器

关键要点

• PostCSS允许开发者构建自己的CSS预处理器，比Sass、LESS或Stylus等其他预处理器提供更大的灵活性和控制性。它使用JavaScript插件来操作样式，并能够添加类似预处理器的功能，例如变量、mixin和嵌套。
• PostCSS的优势包括模块化、轻量级构建、新功能的即时实现以及强制执行开发策略的能力。它也比传统的预处理器更快。但是，它也有一些缺点，例如构建过程的复杂性增加、不同的语法以及对有效CSS的要求。
• 虽然PostCSS具有巨大的潜力，但它可能并不适合所有项目。对于小型、简单的项目或单人团队来说，它可能是一个有吸引力的选择。但对于大型团队或项目，由于Sass的广泛理解和使用，现有的预处理器仍然可能是首选。

许多开发者已经采用了LESS、Stylus或当前最受欢迎的Sass。理想情况下，你还应该使用Autoprefixer对你的CSS进行后处理，以便在需要时添加供应商前缀，而无需使用mixin或Compass之类的框架。Autoprefixer是PostCSS的插件；它是一个将CSS转换为可用于操作样式的对象模型的工具。还有许多其他可用的插件实现了类似预处理器的功能，例如变量、mixin和嵌套。Ben Frain最近的文章《与Sass分手：不是你，是我》提出了一个有趣的命题。鉴于你可以使用PostCSS创建你想要的CSS预处理器，你真的需要Sass、LESS或Stylus吗？一个基本的类似Sass的解析器可以在你的构建过程中创建。在这个例子中，我将使用一个Gulp.js任务文件，但同样的概念也适用于Grunt或任何其他构建系统。首先，我们使用npm安装PostCSS和所需的插件，例如：

npm install gulp-postcss postcss-mixins postcss-simple-vars postcss-nested autoprefixer-core --save-dev

然后在gulpfile.js中创建一个CSS处理函数数组，例如：

var
    gulp = require('gulp'),
    postcss = require('gulp-postcss'),
    processors = [
        require('postcss-mixins'),
        require('postcss-simple-vars'),
        require('postcss-nested'),
        require('autoprefixer-core')({ browsers: ['last 2 versions', '> 2%'] })
    ];

并编写一个CSS处理任务，例如：

// 编译CSS
gulp.task('css', function() {
  return gulp.src('source/css/styles.css')
    .pipe(postcss(processors))
    .pipe(gulp.dest('dest/styles/'));
});

你也可以使用PostCSS API创建你自己的处理函数。例如，我们可以为所有font-family声明应用一个sans-serif后备：

processors = [
        require('postcss-mixins'),
        require('postcss-simple-vars'),
        require('postcss-nested'),
        function(css) {
            // sans-serif 后备
            css.eachDecl('font-family', function(decl) {
                decl.value = decl.value + ', sans-serif';
            });
        },
        require('autoprefixer-core')({ browsers: ['last 2 versions', '> 2%'] })
    ];

如果文件/source/css/styles.css包含以下代码：

$colorfore: #333;
$colorback: #fff;

@define-mixin reset {
    padding: 0;
    margin: 0;
}

main {
    font-family: Arial;
    @mixin reset;
    color: $colorfore;
    background-color: $colorback;

    article {
        color: $colorback;
        background-color: $colorfore;
    }
}

运行gulp css将在/dest/css/styles.css中创建此CSS：

main {
    font-family: Arial, sans-serif;
    padding: 0;
    margin: 0;
    color: #333;
    background-color: #fff;
}

main article {
    color: #fff;
    background-color: #333;
}

优势

PostCSS使你摆脱了预处理器作者强加的限制和选择。这种方法提供了几个好处：

• 模块化 你只需要为你的项目添加所需的插件和函数。
• 轻量级 预处理器正变得越来越庞大和复杂。你可能不会想要或使用每个功能，但它们仍然存在。PostCSS减少了体积。
• 即时实现 你是否曾经等待过某些功能在Sass、LibSass、LESS、Stylus或其他预处理器中可用？你现在可以使用……
• JavaScript函数 你的CSS预处理器使用JavaScript——一种真正的编程语言（尽管有些人这么说！）。大多数预处理器语言结构都是基本的。你经常会看到比它们创建的原始CSS更复杂、更难以理解的函数和mixin。使用PostCSS，可以轻松地打开文件、从数据库读取、发出HTTP请求或进行复杂的计算。
• 强制执行开发策略 假设你想让你的团队避免使用@extend声明。除非他们向构建过程添加一个extend插件，否则任何人都无法使用@extend。这将是立即显而易见的。
• 它很快——非常快 作者估计PostCSS比同等预处理器快4-40倍。如果只需要几个插件，我认为收益会更高。整个解决方案都是用JavaScript构建的，不需要跳转到另一个库或语言解释器。

缺点

那么一切都好吗？不幸的是，PostCSS并非完美的解决方案：

• 复杂性增加 你的构建过程将变得更难以管理。添加Sass通常是一两行代码，但PostCSS需要更多规划——尤其因为插件必须以特定的顺序调用。例如，@import内联应该在解析变量之前解析。但是，如果你的@import声明中包含变量怎么办？在某些情况下，可能需要多次调用插件。
• 不同的语法 我最初尝试将一个小型的Sass项目转换为PostCSS。甚至不要尝试！虽然我最终成功了，但PostCSS插件经常使用略微不同的语法，例如@define-mixin而不是@mixin。这可能会导致混淆和大量的代码更新。部分原因是……
• PostCSS需要有效的CSS 大多数预处理器解析纯文本文件，因此理论上任何语法都是可能的。PostCSS创建了一个对象模型，因此它从一开始就需要语法正确的CSS。即使是//单行注释也可能导致它失败。你可以在传递给PostCSS之前预处理你的CSS文件，但那样你又回到了使用预处理器！

你应该放弃你的预处理器吗？

如果你在一个单人团队中开始一个小型、相对简单的独立项目，自定义PostCSS处理器可能是一个有吸引力的选择。我还推荐PostCSS用于任何真正的后处理任务，例如供应商前缀、将媒体查询打包到单个声明中、减少calc()方程、为旧浏览器应用后备、支持CSS4选择器、缩小等。自己做这些工作没有什么好处。然而，Sass已经达到了临界质量。没有哪个预处理器的语法是完美的，但它会被你团队中的大多数开发者理解。任何细微的不同都不太可能为每个人提供显着的好处或吸引力。也就是说，PostCSS和类似的Rework框架具有巨大的潜力。如果一个模块化的CSS插件系统能够复制——甚至混合——我们想要的Sass、LESS和Stylus的语法和功能，我们将拥有一个能够击败所有其他预处理器的预处理器。你可以打赌，现在有人正在开发这个项目……

你是否成功地将PostCSS用作项目的预处理器？它是否吸引你远离Sass？你是否会从LESS迁移？你会放弃Stylus吗？

关于PostCSS的常见问题解答

PostCSS与其他CSS预处理器的主要区别是什么？

PostCSS是一个使用JavaScript插件转换样式的工具。这些插件可以执行各种任务，例如代码整理、添加供应商前缀，甚至启用未来的CSS功能。与Sass或Less等其他CSS预处理器不同，PostCSS没有内置语法。相反，它使用插件来转换CSS。这使得它更灵活和可定制，因为你可以只选择项目所需的插件。

如何安装和使用PostCSS？

要安装PostCSS，你需要在你的计算机上安装Node.js和npm。然后，你可以使用命令npm install -g postcss-cli全局安装PostCSS。要使用PostCSS，你需要安装你想要使用的插件，然后创建一个配置文件，在其中指定你想要使用的插件。然后，你可以使用命令postcss input.css -o output.css在你的CSS文件上运行PostCSS。

一些流行的PostCSS插件是什么？

有许多可用的PostCSS插件，每个插件都有不同的用途。一些流行的插件包括Autoprefixer，它会自动向你的CSS添加供应商前缀；cssnext，它允许你今天就使用未来的CSS功能；以及cssnano，它会缩小你的CSS以用于生产环境。

我可以将PostCSS与其他CSS预处理器一起使用吗？

是的，你可以将PostCSS与Sass或Less等其他CSS预处理器一起使用。这允许你利用这些预处理器的功能，同时也能从PostCSS的灵活性和强大功能中受益。

使用PostCSS的好处是什么？

PostCSS提供了许多好处。它高度可定制，允许你只选择所需的插件。这可以导致更小、更快的构建过程。PostCSS还使你能够今天就使用未来的CSS功能，并且它可以自动向你的CSS添加供应商前缀，从而节省你的时间并确保你的样式在不同的浏览器中都能正常工作。

使用PostCSS有什么缺点？

虽然PostCSS功能强大且灵活，但它的学习曲线可能比其他CSS预处理器更陡峭。因为它依赖于插件，你需要花时间研究和选择适合你项目的插件。此外，因为它是一个较新的工具，所以它可能不像其他预处理器那样得到广泛的支持或采用。

PostCSS如何处理mixin？

PostCSS通过postcss-mixins插件处理mixin。这个插件允许你在CSS中定义和使用mixin，类似于你在Sass或Less中所做的那样。你可以在PostCSS配置文件中定义一个mixin，然后使用@mixin关键字在你的CSS中使用它。

我可以在我的现有项目中使用PostCSS吗？

是的，你可以将PostCSS集成到你的现有项目中。你只需要安装PostCSS和想要使用的插件，然后设置一个PostCSS配置文件。然后，你可以在现有的CSS文件上运行PostCSS。

PostCSS与Autoprefixer或cssnext等其他工具相比如何？

Autoprefixer和cssnext实际上是PostCSS插件。这意味着它们是在PostCSS之上运行的工具，利用其插件架构。Autoprefixer向你的CSS添加供应商前缀，而cssnext允许你今天就使用未来的CSS功能。

PostCSS适合大型项目吗？

是的，PostCSS适合任何规模的项目。因为它具有可定制性，你可以只选择所需的插件，从而实现更小、更快的构建过程。这使得它成为大型项目（其中性能是一个问题）的一个不错的选择。

以上是如何使用PostCSS构建自己的CSS预处理器的详细内容。更多信息请关注PHP中文网其他相关文章！