PostCSS深度指南：打造高性能现代网页样式

需积分: 10 125 浏览量更新于2024-07-18 收藏 5.13MB PDF 举报

"《精通PostCSS进行Web设计》是一本深入指南，由Alex Libby编著，于2016年出版。PostCSS作为一个快速崛起的技术，已经在像Sass和Less这样的预处理器领域占据了未来地位，其主要优点在于其强大的功能、卓越的速度以及易于使用的特性。本书旨在帮助读者掌握如何利用PostCSS编写高性能、模块化且现代的CSS代码，从而优化网页设计。在PostCSS的世界里，你可以将CSS的编写提升到新的层次。它允许设计师和开发者直接操作CSS语法，而无需依赖编译器的转换过程。这不仅提高了开发效率，还能保持代码的简洁性和可维护性，对于现代前端项目来说，这一点尤为重要。通过本书，学习者可以学习如何： 1. 理解基础概念：首先，读者会深入了解PostCSS的工作原理，包括其插件系统，以及如何将其与其他工具（如Webpack或Gulp）集成。 2. 高级用法：深入探索PostCSS的高级功能，如变量、函数、逻辑运算、自定义属性（custom properties）和模块化（modules）等，这些都是提升代码复用和可扩展性的关键。 3. 性能优化：学习如何使用PostCSS进行性能优化，例如压缩和树形结构调整，确保网页加载速度和渲染效率。 4. 实战应用：书中提供了丰富的实例和项目，帮助读者在实际工作中应用所学知识，逐步掌握PostCSS在响应式设计、动画和渐进增强等方面的应用。 5. 生态与社区：了解PostCSS的生态系统，包括流行插件库的选择和最佳实践，以及如何参与开源社区，共同推动技术进步。 6. 安全与兼容性：尽管PostCSS强调现代CSS，但书中也会涉及如何处理浏览器兼容性问题，确保代码在不同平台上的正常运行。 7. 持续学习：随着技术的不断发展，书中还将指导读者如何跟踪最新的PostCSS发展动态，以便始终保持技能的前沿。《精通PostCSS进行Web设计》不仅是初学者的入门教程，也是经验丰富的开发者进一步提升CSS编程能力的宝贵资源。通过阅读和实践书中的内容，读者将能够充分利用PostCSS的强大功能，构建更加高效、灵活且易于维护的现代Web设计。"

[ ix ]

Preface

As a developer, I'll bet you have a perfect workow—you either write styles using

plain vanilla CSS or use one of the current processors, such as SASS or Less, to create

them. You'll add vendor prexes using the likes of Autoprexer—either manually or

using a tool, such as Grunt or Gulp.

Sounds familiar? Why would you want to disturb something if it works for you, right?

Trouble is, a friend or colleague has started talking about a new processor by the

name of PostCSS—they've piqued your interest sufciently to want to nd out

more about what it is and how it works.

Well, welcome to the fast-growing ecosystem that is PostCSS! By itself, the tool

doesn't do anything, but when paired with the right plugins (and there are hundreds

available for use), it has the potential to become a really powerful processor for you.

Gone are the days when we have to depend on a monolithic library such as SASS

or less. Instead, we can pick and choose exactly which plugins to use based on our

project requirements. PostCSS is an immensely quick processor to use; the question

is, are you ready for the ride?

Here's hoping the answer is yes; if so, let's make a start.

What this book covers

Chapter 1, Introducing PostCSS, kicks off our journey with an introduction to the

world of PostCSS, exploring its features and how we can use this ecosystem to

transform basic code into valid CSS styles that we can use within our projects.

You will discover the benets of using this ecosystem and how its architecture

and modular approach allows us to put together a processor that is tailored

specically for our needs.

Preface

[ x ]

Chapter 2, Creating Variables and Mixins, takes a look at some of the basic concepts that

are familiar to users of existing processor technologies, such as variables and mixins.

You will learn how to transition them to PostCSS and discover how the benets of

using these techniques can transition through to using PostCSS.

Chapter 3, Nesting Rules, explores how existing processors, such as SASS or less, take

advantage of concepts such as nesting to reduce the amount of code we need to write

and how we can replicate the same functionality within our PostCSS processor.

Chapter 4, Building Media Queries, walks us through the basics of adding responsive

support to websites using PostCSS and media queries. You'll learn how to retrot

support for older websites and browsers, and explore how we can take things further

with the advent of CSS4 media queries and provide support today within PostCSS.

Chapter 5, Managing Colors, Images, and Fonts, examines the plugins available for

handling and manipulating images, colors, and fonts within PostCSS. We will

work through a number of examples to illustrate how both images and colors can

be manipulated within PostCSS, such as creating image sprites or altering colors

using palettes within the system.

Chapter 6, Creating Grids, takes us on a journey through constructing the skeleton

of a website using grids—we will explore the basic concept behind using grids and

discover some of the plugin options available for creating them within PostCSS.

We will work through some examples using the Bourbon Neat grid system, before

replicating the examples with PostCSS-equivalent plugins and adding responsive

capabilities to the resulting code.

Chapter 7, Animating Elements, begins with a quick recap of using JavaScript to

animate content, before switching to using CSS for animation, and how you can

transition through to using PostCSS. We will explore using some of the more

well-known libraries, such as Animate.css, before creating a quick demo using

PostCSS and learning how to optimize our animations using PostCSS.

Chapter 8, Creating PostCSS Plugins, teaches us how plugins can be used to extend

PostCSS, and takes us through a journey of exploring the typical architecture of such

a plugin. You will then take a look at some example plugins before working through

creating your own plugins using the boilerplate code available and before testing

and making the plugins available for download by users from the Internet.

Chapter 9, Working with Shortcuts, Fallbacks, and Packs, starts by examining some of

the shortcut plugins and packs available before exploring how we can supplement

them with creating our own shortcut plugins. You will also discover how you can

lint and optimize your code using one of the plugin packs available for PostCSS

and learn how to provide fall-backs to PostCSS code to help maintain support for

older browsers.

Preface

[ xi ]

Chapter 10, Building a Custom Processor, pulls together some of the techniques we've

covered thus far in the book to produce a custom processor that we can use as a basis

for transforming code in our projects. You will explore how to optimize the output

before adding source map and vendor prex support and then testing it on a website.

You will then round off the chapter with a look at extending the processor to use the

CSStyle framework to allow you to write code that works for both SASS or PostCSS.

Chapter 11, Manipulating Custom Syntaxes, introduces us to writing custom syntaxes

using the API and explores some of the options available for parsing code written

using syntaxes such as SASS or less. We work though some examples of parsing code

using PostCSS before converting the output into something that can be displayed on

screen or saved to a le. We will also add in support for highlighting our code using

the midas library.

Chapter 12, Mixing Preprocessors, shows us how we can begin to mix processors as

an aid to make the transition to using PostCSS. We will take a look at the Pleeease

library before installing it and using some of its features. We will then set up a

compilation process before using it to make changes to a standard WordPress theme.

Chapter 13, Troubleshooting PostCSS Issues, takes a look at some of the more common

issues we might experience when using PostCSS, such as the "taskname not in our

gulple" error. We will also take a look at what to do next if all else fails. We will

cover the methods for getting help with an issue or logging details of a bug within

either the core PostCSS system or one of its plugins.

Chapter 14, Preparing for the Future, covers some of the possible options for supporting

future style standards from what people know as CSS4. You will also explore some

of the risks involved and how you can replicate support using existing plugins

available today or extend them to increase support for new CSS4 selectors.

What you need for this book

All you need to work through most of the examples in this book is a simple text

or code editor, a copy of NodeJS (for your platform), Internet access, and a browser.

I recommend installing Sublime Text 3; it works well with Node and Gulp, which

we will use throughout the book.

Some of the examples make use of additional plugins; most (if not all) can be

installed directly from within NodeJS. Details are included within the appropriate

chapter along with links to view the plugin source code and documentation.

剩余413页未读，继续阅读

askinglee

粉丝: 0
资源: 2

PostCSS深度指南：打造高性能现代网页样式

PostCSS：2016年Web设计的强大指南

掌握PostCSS进行高效Web设计

精通PostCSS：构建高性能现代化网页样式

Mastering PostCSS for Web Design 无水印pdf

Mastering PostCSS for Web Design

Mastering PostCSS for Web Design(PACKT,2016)

Mastering-PostCSS-for-Web-Design:精通Web设计的PostCSS，由Packt发布

Mastering Python Design Patterns 无水印pdf

Mastering Windows PowerShell Scripting(2nd) 无水印pdf转化版

Mastering Play Framework for Scala 无水印pdf 0分

最新资源