关键要点
许多开发者已经采用了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并非完美的解决方案：
你应该放弃你的预处理器吗？
如果你在一个单人团队中开始一个小型、相对简单的独立项目，自定义PostCSS处理器可能是一个有吸引力的选择。我还推荐PostCSS用于任何真正的后处理任务，例如供应商前缀、将媒体查询打包到单个声明中、减少calc()方程、为旧浏览器应用后备、支持CSS4选择器、缩小等。自己做这些工作没有什么好处。然而，Sass已经达到了临界质量。没有哪个预处理器的语法是完美的，但它会被你团队中的大多数开发者理解。任何细微的不同都不太可能为每个人提供显着的好处或吸引力。也就是说，PostCSS和类似的Rework框架具有巨大的潜力。如果一个模块化的CSS插件系统能够复制——甚至混合——我们想要的Sass、LESS和Stylus的语法和功能，我们将拥有一个能够击败所有其他预处理器的预处理器。你可以打赌，现在有人正在开发这个项目……
你是否成功地将PostCSS用作项目的预处理器？它是否吸引你远离Sass？你是否会从LESS迁移？你会放弃Stylus吗？
关于PostCSS的常见问题解答
PostCSS是一个使用JavaScript插件转换样式的工具。这些插件可以执行各种任务，例如代码整理、添加供应商前缀，甚至启用未来的CSS功能。与Sass或Less等其他CSS预处理器不同，PostCSS没有内置语法。相反，它使用插件来转换CSS。这使得它更灵活和可定制，因为你可以只选择项目所需的插件。
要安装PostCSS，你需要在你的计算机上安装Node.js和npm。然后，你可以使用命令npm install -g postcss-cli全局安装PostCSS。要使用PostCSS，你需要安装你想要使用的插件，然后创建一个配置文件，在其中指定你想要使用的插件。然后，你可以使用命令postcss input.css -o output.css在你的CSS文件上运行PostCSS。
有许多可用的PostCSS插件，每个插件都有不同的用途。一些流行的插件包括Autoprefixer，它会自动向你的CSS添加供应商前缀；cssnext，它允许你今天就使用未来的CSS功能；以及cssnano，它会缩小你的CSS以用于生产环境。
是的，你可以将PostCSS与Sass或Less等其他CSS预处理器一起使用。这允许你利用这些预处理器的功能，同时也能从PostCSS的灵活性和强大功能中受益。
PostCSS提供了许多好处。它高度可定制，允许你只选择所需的插件。这可以导致更小、更快的构建过程。PostCSS还使你能够今天就使用未来的CSS功能，并且它可以自动向你的CSS添加供应商前缀，从而节省你的时间并确保你的样式在不同的浏览器中都能正常工作。
虽然PostCSS功能强大且灵活，但它的学习曲线可能比其他CSS预处理器更陡峭。因为它依赖于插件，你需要花时间研究和选择适合你项目的插件。此外，因为它是一个较新的工具，所以它可能不像其他预处理器那样得到广泛的支持或采用。
PostCSS通过postcss-mixins插件处理mixin。这个插件允许你在CSS中定义和使用mixin，类似于你在Sass或Less中所做的那样。你可以在PostCSS配置文件中定义一个mixin，然后使用@mixin关键字在你的CSS中使用它。
是的，你可以将PostCSS集成到你的现有项目中。你只需要安装PostCSS和想要使用的插件，然后设置一个PostCSS配置文件。然后，你可以在现有的CSS文件上运行PostCSS。
Autoprefixer和cssnext实际上是PostCSS插件。这意味着它们是在PostCSS之上运行的工具，利用其插件架构。Autoprefixer向你的CSS添加供应商前缀，而cssnext允许你今天就使用未来的CSS功能。
是的，PostCSS适合任何规模的项目。因为它具有可定制性，你可以只选择所需的插件，从而实现更小、更快的构建过程。这使得它成为大型项目（其中性能是一个问题）的一个不错的选择。
以上是如何使用PostCSS构建自己的CSS预处理器的详细内容。更多信息请关注PHP中文网其他相关文章！
