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

Working with SVG in PostCSS

The rapidly increasing use of mobile devices makes creating responsive content a must; the traditional route is using something akin to max-width: 100% to control the size of an element on screen.

A better alternative is to use SVG—this maintains quality, even when resized; standard image formats will become pixelated if resized to an excessive size. For those of you who have previously used SASS, then there isn't any in-built support for SVG as such; the most we can hope to achieve is efficient nesting within our style sheet.

An example of what we might use can be found in the sass folder within the Tutorial22 folder in the code download that accompanies this book.

If we're a regular user of SVG images within SASS, then ...

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