SCSS Mixin para um efeito de papel revestido

Adicione linhas ou réguas horizontais sob cada linha de texto em um bloco para fazer com que pareça papel pautado.

Este mixin usa SCSS e requer a biblioteca Bourbon para gerar o fundo do navegador cruzado, mas com um pequeno ajuste você pode remover essa dependência.

Primeiro, defina o mixin:

// Apply a background to simulate lined paper.
// - height: The line height or rule of the lined paper.
// - color: The line color;
// - extra: Number of extra, blank lines to add after the text.
// - thick: Scale up the line thickness.
@mixin lined-paper($height, $color, $extra: 0, $thick: 1) {
$thickness
: percentage(1 - ((.05 * $thick) / ($height / ($height * 0 + 1))));

@include linear-gradient(top, transparent 0, transparent $thickness, $color $thickness, $color 100%);
background
-repeat: repeat-y;
background
-size: 100% $height;
background
-position: 0 (-.15 * $height);
line
-height: $height;
padding
-bottom: $height * $extra;
}

Em seguida, implemente-o:

p {
@include lined-paper(2em, #4ab6bb, 3);
}

O resultado:

Cenário