Mastering PostCSS for Web Design

Alex Libby

商品描述

Key Features

  • Incorporate cutting-edge styles in your web pages with PostCSS
  • Simplify the process of writing CSS to a great extent using PostCSS shortcuts, fallbacks, and pack plugins
  • This in-depth, step-by-step guide will help you master PostCSS, to create amazing and responsive web designs

Book Description

PostCSS is a tool that has quickly emerged as the future of existing preprocessors such as SASS and Less, mainly because of its power, speed, and ease of use. This comprehensive guide offers in-depth guidance on incorporating cutting-edge styles into your web page and at the same time maintaining the performance and maintainability of your code.

The book will show how you can take advantage of PostCSS to simplify the entire process of stylesheet authoring. It covers various techniques to add dynamic and modern styling features to your web pages. As the book progresses, you will learn how to make CSS code more maintainable by taking advantage of the modular architecture of PostCSS. By the end of this book, you would have mastered the art of adding modern CSS effects to web pages by authoring high performing, maintainable stylesheets.

What you will learn

  • Add mixin and variable support to PostCSS along with conditional support
  • Explore the different ways of nesting code such as BEM and standard nesting within PostCSS
  • Optimize media queries built with PostCSS to get the best performance
  • Add dynamic styling elements such as images, fonts, grids, and SVG and retina support using existing preprocessors as well as PostCSS
  • Get familiar with using plugins, and extend PostCSS with the API
  • Build a fully working custom preprocessor and test it on different sites such as WordPress
  • Write a custom syntax in PostCSS while still using pre-built syntaxes such as Less, SASS, or Stylus
  • Provide support for future CSS such as CSS4 using current CSS3 classes

About the Author

Alex Libby's background is in IT support―he has been involved in supporting end users for almost 20 years in a variety of different environments; a recent change in role now sees Alex working as an MVT test developer for a global distributor based in the UK. Although Alex gets to play with different technologies in his day job, his first true love has always been the open source movement, and in particular, experimenting with CSS/CSS3, jQuery, and HTML5. To date, Alex has written 10 books on subjects such as jQuery, HTML5 video, SASS, and CSS for Packt and has reviewed several more―Mastering PostCSS Web Design is Alex's eleventh book for Packt.

Table of Contents

  1. Introducing PostCSS
  2. Creating Variables and Mixins
  3. Nesting Rules
  4. Building Media Queries
  5. Managing Colors, Images, and Fonts
  6. Creating Grids
  7. Animating Elements
  8. Creating PostCSS Plugins
  9. Working with Shortcuts, Fallbacks, and Packs
  10. Building a Custom Processor
  11. Manipulating Custom Syntaxes
  12. Mixing Preprocessors
  13. Troubleshooting PostCSS Issues
  14. Preparing for the Future

商品描述(中文翻譯)

主要特點



  • 使用PostCSS在網頁中加入尖端的樣式

  • 使用PostCSS的快捷方式、回退和插件簡化CSS編寫過程

  • 這本深入的、逐步指南將幫助您掌握PostCSS,創建令人驚嘆且響應式的網頁設計

書籍描述


PostCSS是一個迅速崛起的工具,被視為SASS和Less等現有預處理器的未來,主要因為它的強大、速度和易用性。這本全面的指南提供了深入的指導,教您如何將尖端的樣式融入到您的網頁中,同時保持代碼的性能和可維護性。


本書將展示如何利用PostCSS簡化整個樣式表編寫過程。它涵蓋了各種技術,以向您的網頁添加動態和現代的樣式特性。隨著書籍的進展,您將學習如何通過利用PostCSS的模塊化架構,使CSS代碼更易於維護。通過閱讀本書,您將掌握在高性能、可維護的樣式表中添加現代CSS效果的技巧。

您將學到什麼



  • 在PostCSS中添加mixin和變量支持,以及條件支持

  • 探索在PostCSS中嵌套代碼的不同方式,如BEM和標準嵌套

  • 優化使用PostCSS構建的媒體查詢,以獲得最佳性能

  • 使用現有的預處理器和PostCSS添加動態樣式元素,如圖像、字體、網格和SVG和視網膜支持

  • 熟悉使用插件,並通過API擴展PostCSS

  • 構建一個完整的自定義預處理器,並在不同的網站上進行測試,如WordPress

  • 在PostCSS中編寫自定義語法,同時仍使用預先構建的語法,如Less、SASS或Stylus

  • 使用當前的CSS3類為未來的CSS(如CSS4)提供支持

關於作者


Alex Libby的背景是IT支援,他在不同的環境中支援終端用戶已有近20年的經驗;最近的角色讓Alex成為一家總部位於英國的全球分銷商的MVT測試開發人員。儘管Alex在工作中可以玩弄不同的技術,但他始終對開源運動情有獨鍾,特別是對CSS/CSS3、jQuery和HTML5的實驗。迄今為止,Alex已經為Packt出版了10本書,涵蓋了jQuery、HTML5視頻、SASS和CSS等主題,並且還審查了幾本書。《Mastering PostCSS Web Design》是Alex為Packt出版的第十一本書。

目錄



  1. 介紹PostCSS

  2. 創建變量和mixin

  3. 嵌套規則

  4. 構建媒體查詢

  5. 管理顏色、圖像和字體

  6. 創建網格

  7. 動畫元素

  8. 創建PostCSS插件

  9. 使用快捷方式、回退和packs

  10. 構建自定義處理器

  11. 操作自定義語法

  12. 混合使用預處理器

  13. 解決PostCSS問題

  14. 為未來做準備