PostCSS Crash Course

Опубликовано: 07 Октябрь 2024
на канале: Pixel Rocket

4,445

175

PostCSS is a Javascript tool used to transform your project's CSS. In this crash course, I'll talk you through the basics, compare PostCSS to Sass, and then we'll code together on two projects: the first project will show you what functionality PostCSS offers you as a pre-processor, so a Sass replacement. The second project will show you how you can use PostCSS to prepare your production CSS.

My website
https://www.pixelrocket.store

My Sass Crash Course
• Sass Crash Course 2022

My PostCSS Playlist
• Learn PostCSS

Course Resources (You'll need this if you want to code along):
https://www.dropbox.com/s/2sefet1n884...

Plugins Used:

PostCSS plugin
https://github.com/postcss/postcss

PostCSS CLI plugin
https://github.com/postcss/postcss-cli

PostCSS import
https://github.com/postcss/postcss-im...

PostCSS partials
https://www.npmjs.com/package/postcss...

PostCSS @for
https://github.com/antyakushev/postcs...

PostCSS @each
https://github.com/madyankin/postcss-...

PostCSS at rules vars
https://github.com/Scrum/postcss-at-r...

PostCSS each variables mapping
https://github.com/awcross/postcss-ea...

PostCSS nested
https://github.com/postcss/postcss-ne...

PostCSS custom media queries
https://github.com/csstools/postcss-c...

PostCSS Gulp
https://github.com/postcss/gulp-postcss

PostCSS PurgeCSS
https://purgecss.com/plugins/postcss....

PostCSS CSSNano
https://github.com/cssnano/cssnano

Timestamps

0:00 Intro
0:40 Course resources & requirements
1:25 What is PostCSS
2:40 Project one setup
3:45 Install PostCSS & PostCSS CLI
10:15 Setup NPM PostCSS command
15:50 Setup import & partials
30:19 Refactor component using PostCSS
38:45 Refactory utility using PostCSS
44:30 Refactor media queries using PostCSS
47:00 Project two setup
48:45 Add PostCSS to Gulp
50:07 Install PurgeCSS & CSSNano plugins