Drawing pixels with box-shadow

HTML

<div class="sprite">
</div>

SCSS

body { padding: 20px; }

/* Size of each 'pixel' to draw */
$p: 1px; /* Try changing this to, eg. 4px */

/* Calculate 'upsized' value */
@function p($n) {
  @return $p * $n;
}

/* Sprite itself */
.sprite {
    /* Sets size of pixels for this element */
    width: p(1);
    height: p(1);
    /* Drawing */
    box-shadow:
        /* Row 1 */
        p(6) 0 0 black,
        p(7) 0 0 black,
        p(8) 0 0 black,
        p(9) 0 0 black,
        p(10) 0 0 black,
        p(11) 0 0 black,
        /* Row 2 */
        p(4) p(1) 0 black,
        p(5) p(1) 0 black,
        p(6) p(1) 0 black,
        p(7) p(1) 0 white,
        p(8) p(1) 0 red,
        p(9) p(1) 0 red,
        p(10) p(1) 0 white,
        p(11) p(1) 0 black,
        p(12) p(1) 0 black,
        p(13) p(1) 0 black