O'Reilly logo

Mastering Sass by Luke Watts

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

Dropcaps

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 ...

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