I quite like dropcaps. I feel they can make a boring chunk of text instantly more interesting and visually appealing. Therefore, I'm going to add a mixin which we can use in various places in our design to add dropcaps. Prime candidates for dropcaps are the services sections and the text widget in the footer.

There are a number of methods for creating a dropcap. You can use an image, however, this means the first letter is invisible to screen readers, and therefore the text makes no sense. So that option is out of the question. You can wrap the first element in a span with a class of dropcap and simply add the dropcap styling to that class. However, this involves more markup and I usually try my best to avoid this.

For these reasons, my ...

Get Mastering Sass now with the O’Reilly learning platform.

O’Reilly members experience live online training, plus books, videos, and digital content from nearly 200 publishers.