Readable Text Mixin

readable-text-mixin.scss

/**
    Ensures that text is readable on any background.
    Stolen from https://stackoverflow.com/questions/23968961/css-how-can-i-make-a-font-readable-over-any-color#43135326
*/
@mixin readable-shadow($size, $color: white) {
    text-shadow:
        #{0.01 * $size}em 0 $color,
        0 #{0.01 * $size}em $color,
        #{-0.01 * $size}em 0 $color,
        0 #{-0.01 * $size}em $color,
        #{-0.01 * $size}em #{-0.01 * $size}em $color,
        #{-0.01 * $size}em #{0.01 * $size}em $color,
        #{0.01 * $size}em #{-0.01 * $size}em $color,
        #{0.01 * $size}em #{0.01 * $size}em $color;
}