PostCSS深入学习:你需要知道什么
如果你想真正的知道PostCSS的话,你就应该尽快学会PostCSS是什么以及如何使用它。在这个系列中,我们将带你深入了解PostCSS以及如何使用PostCSS方法。如果你还没有做好思想准备去了解PostCSS能做什么,那么可以跟着这个系列进入学习,这个系列将带你进入到CSS的新世界之中。
如果你想真正的知道PostCSS的话,你就应该尽快学会PostCSS是什么以及如何使用它。在这个系列中,我们将带你深入了解PostCSS以及如何使用PostCSS方法。如果你还没有做好思想准备去了解PostCSS能做什么,那么可以跟着这个系列进入学习,这个系列将带你进入到CSS的新世界之中。
欢迎开启我们PostCSS深入学习系列之快入门指南。在这些初级教程中,可以让我们快速的了解PostCSS和如何最有效的使用PostCSS。在这篇文章中,我们将先告诉你如何设置PostCSS选项,所以你现在开始使用PostCSS只要几分钟。接下来将告诉你如何在Codepen和Prepros中设置PostCSS。
在上一篇文章中,我们介绍了如何在CodePen和Prepros中使用PostCSS。虽然里面的选项设置可以让你第一时间接触和使用PostCSS,但也有很多PostCSS插件限制你不能使用。这篇教程将告诉你如何在Gulp配置中使用PostCSS插件,而且可以根据你自己需要的去配置所要的插件。这才是真正的进入到PostCSS插件生态系统中。
当你阅读完本系列教程前面的内容,你应该收集了一些PostCSS插件。如何选择PostCSS的插件,这一切取决于你的经验。鉴于前面的基础,我们来继续了解PostCSS插件的生态系统。通过这个可以了解PostCSS多么强大,以及他能提供哪些功能。我们将讨论PostCSS插件管理,你可以通过这些去关注最新的PostCSS插件,了解这些插件属于什么类别,考虑如何将这些插件运用到实际的项目中。
在前面一系列的PostCSS教程中我们学习了PostCSS一些基础知识。接下来准备继续使用PostCSS生成样式表,而且采用不同类型的插件用于不同的目的。在这篇教程中我们使用PostCSS创建一个跨浏览器兼容性的样式表。我们将要做的:需要前缀的自动添加前缀,添加一系列的IE版本,回退到IE8、IE9和IE10,为有动画属性添加will-change
属性。那我们开始吧。
上一节的教程中学习了如何使用PostCSS插件帮助你处理跨浏览器兼容性的样式,特别是如何对IE老版本做降级处理。在本教程中我们将继续学习如何使用PostCSS插件让你的样式表更加高效,加载更快。这些都可以通过PostCSS插件执行各种压缩和优化。
在《PostCSS深入学习: 跨浏览器兼容性》和《PostCSS深入学习: 压缩和优化CSS》两篇文章中学习了使用PostCSS插件实现跨浏览器的兼容性和CSS样式的压缩与优化,本质上说,这些都是后处理CSS的方式。在这篇教程中,你将学习PostCSS插件中的预处理插件包PreCSS,可以像使用Stylus,Sass或LESS一样使用PreCSS。
在上一篇文章中,我们学习了如何使用PreCSS这款优秀的预处理器插件包。在这篇文章中我们将基于PostCSS的基础上以不同的方式构建一个预处理器。你可以精心挑选一些优秀的PostCSS插件,自定义构建一款属于自己的预处理器。通过我个人一些发现,通过设置一些插件带你定制一个强大的预处理器。当然,你可以选择我下面提到的插件,你也可以选择你喜欢的插件来定制属于自己的预处理器。