PostCSS深入学习: 定制自己的预处理器
在上一篇文章中,我们学习了如何使用PreCSS这款优秀的预处理器插件包。在这篇文章中我们将基于PostCSS的基础上以不同的方式构建一个预处理器。你可以精心挑选一些优秀的PostCSS插件,自定义构建一款属于自己的预处理器。通过我个人一些发现,通过设置一些插件带你定制一个强大的预处理器。当然,你可以选择我下面提到的插件,你也可以选择你喜欢的插件来定制属于自己的预处理器。
在上一篇文章中,我们学习了如何使用PreCSS这款优秀的预处理器插件包。在这篇文章中我们将基于PostCSS的基础上以不同的方式构建一个预处理器。你可以精心挑选一些优秀的PostCSS插件,自定义构建一款属于自己的预处理器。通过我个人一些发现,通过设置一些插件带你定制一个强大的预处理器。当然,你可以选择我下面提到的插件,你也可以选择你喜欢的插件来定制属于自己的预处理器。
过去几年,我们常常会听说硬件加速给移动端带来了巨大的体验提升,但是即使对于很多经验丰富的开发者来说,恐怕对其背后的工作原理也是模棱两可,更不要合理地将其运用到网页的动画效果中了。在本文中,我会和大家分享有关硬件加速的前端技巧。
如果你喜欢使用PostCSS,但又不想抛弃你最喜欢的预处理器。不用担心,你不需要作出二选一的选择,你可以把PostCSS和预处理器(Sass、Stylus或LESS)结合起来使用。有几个PostCSS插件配合预处理器得到很好的赞誉,因为他们将功能添加到你的工作流中,让你工作变得更加轻松。如果你只使用一个预处理器,而不使用这些插件,你的工作流至少会变得更加困难。我们会涉及一些免费的PostCSS插件,然后我们将会介绍一些配置的阐述,告诉您如何将PostCSS和你喜欢的预处理器(Sass、Stylus或LESS)之一结合在一起使用。
这篇教程我们将学习如何结合BEM和SUIT来使用PostCSS,让编写CSS样式更容易、更有效。这两个方法都是用来给类命名的,使用它更容易让你将风格紧密结合在一起,并且帮助其他开发人员从各种的类名就能识别出对应的样式风格。BEM是由@Yandex提出的一种类名命名方式。SUIT是基于BEM上的另一种类名命名方式,只不过@Nicholas Gallagher在BEM的基础上做了一些调整。BEM能做的事情,SUIT都可以做,但很多用户觉得SUIT是BEM的一种改进。
CSS animations 用法简洁功能强大,一个完整的动画只需命名、@keyframes
关键帧定义以及绑定到元素三个步骤。虽然 CSS animations 的概念和用法比较简单,但却可以创造复杂精致的动画,比如多步过渡动画,这也是本文关注所要向您介绍的重点。
到目前为止,我们已经使用 PostCSS 做了很多事情,比如,优化样式,给预处理器增加功能,生成某些符合规范的样式,但是它只有帮助写原始 CSS 的人吗?每个 Web 设计师在他们的职业生涯中都会写出有很多可复用的代码,如果你能用一点时间把每一个都收集起来到最后那将会变得很多。在本教程中,我们要使用 PostCSS 的一系列的简写和速写来减少每天的编代码的时间。 让我们开始吧!
上周我们学习了如何使用<text>
元素创建SVG文本。在实例中我们设置了x
和y
坐标来定位文本,也尝试了给SVG文本中的每个字符定位。关于<text>
元素还有很多内容。在处理SVG文本时,不要局限于x
和y
属性。<text>
元素还有几个可以添加的属性,现在我们开始讨论吧。
SVG的<text>
元素允许你很简单地定位和给文本添加样式,但是如果你想要针对文本的不同部分定位和添加样式呢?难道我们要去创建多个text
元素吗?不需要的。有更简单的方式,tspan
来拯救世界了。前两周我们已经看了SVGtext
元素,并整理了几个我们可以使用的属性。<text>
元素不是唯一的SVG文本显示的方式。今天我们来讨论另外两种可以结合<text>
元素使用的SVG元素——<tspan>
和<tref>
。
写一次SVG代码,然后在多个地方重用,可以帮助你写出更多模块化的代码,而且它也有助于维护。通过tref
元素,SVG可以很方便地重用text
元素的内容。上周我大概讲解了tspan
元素,并通过几个实例讲了如何使用它来单独给文本添加样式和定位。几个示例中都使用了位置属性——x
、y
、dx
和dy
,还提到了其它几个属性。我们现在来讲讲剩下的两个属性,然后再讲讲使用tref
元素重用SVG文本。不过注意tref
元素是SVG 1.1规范的一部分,它已经从SVG 2.0规范中删除了。我在这里介绍它,也许哪天你就碰到它了呢。