Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Introduction to PostCSS

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

What is PostCSS?

3:26 with Guil Hernandez

PostCSS is a tool for transforming CSS with JavaScript. Once you install PostCSS, you can choose from hundreds of JavaScript-based plugins that transform your CSS to add powerful features and functionality.

Resources

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    [MUSIC] 0:00
    Hey, everyone I'm Guil, a friend and teacher here at Treehouse. 0:04
    If you write a lot of CSS, you may have heard about PostCSS. 0:08
    A popular processing tool for styling your websites and applications. 0:12
    In this workshop you'll get up to speed with PostCSS. 0:16
    You'll learn what PostCSS is and what it isn't. 0:19
    I'll show you a few examples of how PostCSS works, then you'll install and 0:22
    add PostCSS to your front end workflow using a built tool like Gulp. 0:26
    After that you'll learn about the custom plugins PostCSS uses to style your pages. 0:31
    This workshop assumes you have basic knowledge of NodeJS, NPM, and Gulp. 0:36
    You can brush up on those topics by taking the courses 0:41
    listed in the teacher's notes of this video. 0:43
    Let's get started. 0:46
    If you've worked with a CSS preprocessor like SASS or LESS, 0:48
    you know that a CSS preprocessor takes a special non-browser compatible syntax and 0:52
    translate or transpose it into plain CSS the browser can understand. 0:58
    Now a CSS post-processor applies changes to standard CSS 1:03
    after you've written it or after it's been compiled by SASS or LESS. 1:08
    A post processor doesn't use a special syntax like SASS or LESS does, for 1:13
    example a CSS post-processor can 1:18
    automatically add vendor prefixes to CSS properties that need them. 1:21
    PostCSS is a tool for transforming CSS with JavaScript. 1:25
    It's a different approach to styling web pages. 1:29
    PostCSS relies on an ecosystem of custom JavaScript 1:32
    plugins written by developers in the JavaScript community. 1:36
    As you'll learn in a later video, once you install PostCSS and add it 1:39
    to your front-end workflow, you can choose from hundreds of plugins that transform 1:43
    your CSS to add powerful features and functions, even language extensions. 1:47
    CSS preprocessors like SASS and LESS are monolithic, meaning they include 1:52
    every single feature in one large, centrally maintained code base. 1:57
    So the code you write needs to be in line with the chosen pre-processor's 2:01
    code base and standards. 2:05
    SASS and LESS are also one big answer to a subset of CSS problems, so 2:06
    they come with more features than you'll probably use or need on a given project. 2:11
    And you also need to wait for new version releases to install new features. 2:16
    PostCSS is incredibly flexible. 2:20
    With PostCSS you have total control over the features and functionality. 2:23
    You pick and choose which features you want for your project. 2:27
    You add as many or as few plugins as you'd like to your workflow. 2:30
    For example you can install plugins that convert pixel units to rem units, 2:34
    create and display SVG sprites, or plugins that let you write CSS using SASS like 2:39
    variables mixins and nested selectors. 2:43
    Even use future CSS features now with plugins that transform new CSS specs 2:46
    in to compatible CSS, so you don't need to wait for browser support. 2:51
    This will all start to make sense in a later video when we install and 2:56
    test a few popular PostCSS plugins. 3:00
    So, it's an exciting time to be learning about PostCSS. 3:02
    It's a tool that's been downloaded by developers over 17 million times 3:05
    just this year. 3:10
    And popular services and industry leaders like Google, Wikipedia, and 3:11
    WordPress are using PostCSS in their front end workflow. 3:14
    In the next video, you'll learn how PostCSS transform your CSS plugins, 3:19
    then you'll see examples of plugins in action. 3:23

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up