使用 PostCSS-cssnext 开始了解未来的 CSS

huma13453

今年早些时候，SitePoint 出版的“7 个让您轻松掌握 PostCSS 的 PostCSS 插件”中出现了对PostCSS-cssnext的讨论。 PostCSS-cssnext 是一个用于编写下一代 CSS 的插件包。本文深入介绍了该项目的历史及其优势。一旦我们对 PostCSS-cssnext 有了更深入的了解，我们就会跳到一些示例供您使用。在本文结束时，您将精通 PostCSS-cssnext 的未来 CSS 语法，并能够决定它是否是您希望在即将到来的（或现有的）项目中使用的东西！ 对下一代 CSS 的需求 无论使用哪种语言，开发人员总是追求最新的功能。Babel等工具为JavaScript 开发人员提供了对未来 ECMAScript 功能的支持，而 PostCSS-cssnext 则为 Web 设计人员提供了未来的 CSS 功能。


目前，这意味着提供对 CSS4 相关功能的支持，例如CSS 变量、嵌套等等！现在，在我们进一步讨论之前，我想指出这样一个事实：未来的 CSS 功能可能会发生变化，CSS4 规范在这方面也不例外。尽管如此，PostCSS-cssnext 通过 华人海外澳洲号码数据 提前通知用户即将发生的任何更改，减轻了这可能对项目产生的负面影响。 postcss 主页截图 - 功能 从 cssnext 到PostCSS-cssnext 最初，“cssnext”旨在执行缩小代码和显示错误消息等任务。这些功能很有帮助，但它们不支持未来的 CSS 功能，而这正是 PostCSS-cssnext 项目的最终目标。因此，cssnext 团队决定放弃将 cssnext 作为独立工具的想法，因为支持它的时间可以更好地用于支持未来的 CSS 语法及其任何后续更改。



对于其他与 CSS 相关的流程，开发人员可以将 PostCSS-cssnext 与其他技术集成，例如用于代码精简的cssnano和用于错误报告的postcss-browser-reporter。 剖析 PostCSS-cssnext 如果我们深入研究GitHub 上的 PostCSS-cssnext 存储库，我们可以看到这个插件的模块化程度。在src/features.js文件中，我们将看到每个未来 CSS 功能的代码都包含在根据相关 CSS 规范命名的自己的模块中。由于它是一个插件包，PostCSS-cssnext 与 PostCSS 插件捆绑在一起。这意味着如果我们选择的话，我们可以单独安装这些功能，尽管使用 PostCSS-cssnext 意味着我们不必这样做！例如，如果我们只想使用CSS 自定义属性，我们可以通过npm如下方式安装它有关 PostCSS-cssnext 支持的所有 CSS 功能的完整列表，请访问PostCSS-cssnext 网站上的专用功能页面。