深入PostCSS Web设计

PostCSS是一种工具,一款已成长为像Sass和LESS一样主流的处理器,这一切都归功于它的强大、速度和易用性。《深入PostCSS Web设计》是使用PostCSS的完全指南,《深入PostCSS Web设计》将指导你如何编写优秀的样式,并将其运用到Web页面,同时让你的样式保持可维护性。这本《深入PostCSS Web设计》将向你展示如何利用PostCSS简化样式表的整个过程。它涵盖了给Web页面添加动态的、现代的样式特性的各种技术。随着内容的深入,你将学习如何使用PostCSS来让CSS更具模块化的特性、更易于维护。读完《深入PostCSS Web设计》,你将掌握如何给Web添加CSS样式表,以及如何创建高执行,可维护的样式表。

  • 添加支持PostCSS的混合宏、变量以及条件支持。
  • 探索代码嵌套的不同方式,如BEM和PostCSS的嵌套。
  • 使用PostCSS优化媒体查询,获得最佳性能。
  • 使用PostCSS处理器给元素,如图像、字体、网格、SVG和高清图像添加样式。
  • 熟悉使用插件和使用PostCSS API扩展插件。
  • 定制自己的处理器并在不同的网站上测试,比如WordPress。
  • 在PostCSS中编写一个自定义语法,如类似Sass、LESS或Stylus处理器的语法。
  • 提供对未来的CSS特性(如CSS4特性和一些CSS3特性)的支持。

这是国内第一本有关于PostCSS的书籍,原文作者@Alex Libby是一位有着近20年的多领域终端用户支持经验,目前在英国的一家全球经销商担任MVT测试开发者。虽然@Alex的日常工作是和各种技术打交道,但他最关注的还是开源社区的动向,尤其是CSS、CSS3、jQuery和HTML5等技术。

中文版本是由几位热爱CSS处理器的前端开发者一起翻译的(@大漠、@南北、@彦子和@静子),也都是W3cplus社区的成员。初次翻译一本书,肯定有很多不足之处,如果您发现有何不对之处,还希望多多指正。

下面的内容是本书的第一章节,放出来给喜欢PostCSS的同学试读,如果您喜欢,欢迎在各大售书的网站上下单。

那我们开始吧!希望大家会喜欢!

无论是美化 HTML 元素,还是创建复杂的页面动画,都离不开 CSS,CSS 是一个网站不可或缺的组成部分。如果一个网站没有使用 CSS 美化页面的样式,没有使用 JavaScript 响应用户的行为,那么这样的网页一定会失色不少。为网站开发精美的 CSS 样式往往会花费开发者大量的时间和精力,而开发者为了减少开发时间和避免重复工作,通常会选择预处理器自动化地构建 CSS 样式,比如为特殊属性添加浏览器前缀等。但是,使用预处理器的缺点也很明显,相对于预处理器自身的庞大和复杂,开发者实际使用的功能却很少,也就是说大材小用了。

PostCSS 的模块化风格就是为解决这一问题而来,使用它你可以创建流式、快速的 CSS 处理器,而且没有一丝冗余的功能。在本章节中,我们先会介绍 PostCSS 的安装和使用方式,最后介绍 PostCSS 的架构模式,主要内容包含以下几个部分:

  • 思考为自己创建预处理器的优势所在
  • 介绍 PostCSS 的基础知识和优秀特性
  • 配置 PostCSS 的开发环境
  • 创建一个使用 PostCSS 的示例
  • 探索 PostCSS 的工作方式和架构模式

下面就让我们开始吧!

本书所有的动手实践部分都是基于 Windows 系统设计和演示的,如果您使用的是其他操作系统,请根据您的开发环境进行适当的调整。

编译之美

问大家一个问题:Sass、Stylus、Haml 和 Less,它们之间有哪些共性呢?

答案就是:它们都是从一种源码格式编译为另一种源码格式的编译器,或者用官方术语称之为转换器(transpiler)。转换器的起源可以追溯到上个世纪八十年代,在那一时期出现了很多不同格式的转换器,其中 Digital Reasearch 在 1981 开发的 XLT86 是最早一代的转换器。

近期来看,众所周知的预处理器 Sass 诞生于 2006 年,Alexis Sellier 创建的 LESS 诞生于 2009 年。它们的工作机制很类似:接收一组样式并将其编译为原生的 CSS 代码。开发者可以直接使用它们提供的丰富功能,比如变量、混合宏(mixin)、函数等等。这些转换器可能并不会减少开发者编写的代码数量,却可以帮助开发者以更可靠的方式管理代码,实现代码复用,进而提高代码的可维护性。

但是,在使用这些预处理器时常常会遇到下列问题:

  • 使用这些预处理器前先要安装一堆依赖,比如使用 Sass 需要安装 Ruby;使用 Less 需要安装 JavaScript 相关的库
  • 项目中往往只使用了预处理器的极少数功能呢,但开发者被强制安装一个庞大的预处理器,比如 Sass
  • 使用预处理器编译样式实际上是很慢的,虽然初始的编译过程只有几秒钟,但随着项目体量的增长会对编译时间造成严重影响

由此看来,预处理器就不是那么迷人了!那么是否有一种方式或工具可以避免上述所有问题呢,并且同时还可以移除安装时的一堆依赖呢?

当然,那就是让我们自己来创建一个样式处理器!当您第一次听别人这么说的时候,一定会觉得很疯狂。不要担心我们的想法有多么天马行空,请听我详细解释一下为什么这是一个比预处理器更加优秀的方案。

PostCSS介绍

在本章开始的时候,曾提到过我们将会创建属于自己的预处理器,在这里有一点我要反悔了。请听我慢慢解释,我们到底要做什么呢?

实际上,我们在做一个预处理器的同时还会做一个后处理器。之所以这么做,是因为我们选择的工具允许我们同时创建这两个处理器,这个工具就是 PostCSS,您可以前往 https://github.com/postcss/postcss 下载它。目前,业界已经有公司将 PostCSS 应用到线上产品中,比如 Twitter、Google、Bootstrap、CodePen 以及 WordPress(限制性使用部分功能)。

PostCSS 是一个基于 Node.js 构建的第三方模块,所以它可以与现有的大量 Node.js 插件协同时运行,而且在本书中我们将会使用大量的插件来演示 PostCSS 的使用方式。下面让我们花点时间探索一下使用 PostCSS 给前端开发带来的增益效果。

PostCSS 的优势

当大家说到 PostCSS 时,到底是在指什么呢?简而言之,PostCSS 这个术语可以指代两件事:一是 PostCSS 核心工具,二是基于 PostCSS 创建的插件系统。PostCSS 核心工具并不能直接用于处理样式,只有配合它的插件,才能完成相关的编译工作。下面让我们看看在实际开发中怎么使用 PostCSS:

  • PostCSS 的模块化架构意味着我们可以自由选择需要的插件,进而减少整个工具的体量,使真个工具保持轻量、可扩展;
  • 现有的处理器趋向于两种不同的类型:预处理器和后处理器,这就限制了开发者的选择。PostCSS 可以让开发者在同一个处理流程中同时包含这两种操作,也就是编译前的预先处理和编译后的后置处理。也就是说,使用 PostCSS 我们可以同时使用预处理器和后处理器,充分利用它们的优势进行开发工作;
  • PostCSS 可以无缝融合到现有的通用任务执行工具中,比如 Gulp、Grunt、Broccoli,通过这些工具 PostCSS 可以实现更广泛的自动化任务;
  • PostCSS 完全使用 JavaScript 编写而成,编译时无需添加其他依赖,不用安装 Ruby、LibSass 之类的底层工具,其唯一的依赖就是 Node.js,对大多数的前端工程师来说,他们已经安装过该工具了;
  • 无需再学习新的编程语言,前端工程师通常都能在工作中熟练使用 JavaScript 处理开发任务;
  • 可以根据需要随时添加或移除插件,这是其它大型工具所无法实现的;
  • 开发门槛低,这意味着无论是按照自己的需求创建插件还是修改现有插件都很轻松
  • PostCSS 的编译速度极快,下面图片中的测试使用了 postcss-benchmark 插件(详见 https://github.com/postcss/benchmark),测试内容包括解析代码、嵌套规则、混合宏、变量和数学计算。显而易见,PostCSS 轻松取胜:

  • PostCSS 本身是功能完备的,不用像 Sass 一样考虑版本更新,不用考虑下载最新的 LibSass 等问题;

PostCSS的陷阱

使用自定义的处理器有一些注意事项,其中最重要的就是理解:P

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/preprocessor/postcss-book.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部