如何使用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中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

JavaScript是现代Web开发的基石,它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发,极大地提升了用户体验和跨平台开发的灵活性。

Python和JavaScript开发者的薪资没有绝对的高低,具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大,薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。

学习JavaScript不难,但有挑战。1)理解基础概念如变量、数据类型、函数等。2)掌握异步编程,通过事件循环实现。3)使用DOM操作和Promise处理异步请求。4)避免常见错误,使用调试技巧。5)优化性能,遵循最佳实践。

实现视差滚动和元素动画效果的探讨本文将探讨如何实现类似资生堂官网(https://www.shiseido.co.jp/sb/wonderland/)中�...

如何在JavaScript中将具有相同ID的数组元素合并到一个对象中?在处理数据时,我们常常会遇到需要将具有相同ID�...

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

深入探讨console.log输出差异的根源本文将分析一段代码中console.log函数输出结果的差异,并解释其背后的原因。�...
