O'Reilly logo

Mastering PostCSS for Web Design by Alex Libby

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating mixins with PostCSS

Our orchid demo so far uses a number of variables to define values in our code. While this works well, it is somewhat limiting; after all, creating lots of variables to handle different values is an expensive use of resources!

A smarter approach is using mixins; this works well when we can group several statements together as a single definition, then clone this definition into multiple rule sets. Users of pre-processors will of course recognize this functionality; the PostCSS team have created a plugin to offer similar functionality within PostCSS.

The plugin source is available from https://github.com/postcss/postcss-mixins, and can be installed via Node, using the same method we've covered throughout this chapter. ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required