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 it is likely we would use a library such as sass-svg
, from https://github.com/davidkpiano/sass-svg. Moving away from SASS to PostCSS is easy; the PostCSS ecosystem has a number of plugins we can use to manipulate images. Let's take a look at how...