使用 PostCSS-cssnext 开始了解未来的 CSS
今年早些时候,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 语法及其任何后续更改。
https://manchestermassage.net/wp-content/uploads/2024/02/photo_2024-02-14_09-44-29-8.jpg
对于其他与 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 网站上的专用功能页面。
页:
[1]