Typographic Baseline with SASS

Sometimes you just want to set a typographic baseline manually without scripts. When you do, you’ll need some horizontal lines…

$baseline: 18px;

body {

    /* FF3.6+ */
    background-image: -moz-linear-gradient(top, rgba(0,0,0,0) 95%, rgba(0,0,0,0.5) 100%);

    /* Chrome, Safari4+ */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(95%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.5)));

    /* Chrome10+, Safari5.1+ */
    background-image: -webkit-linear-gradient(top, rgba(0,0,0,0) 95%,rgba(0,0,0,0.5) 100%);

    /* Opera11.10+ */
    background-image: -o-linear-gradient(top, rgba(0,0,0,0) 95%, rgba(0,0,0,0.5) 100%);

    /* IE10+ */
    background-image: -ms-linear-gradient(top, rgba(0,0,0,0) 95%,rgba(0,0,0,0.5) 100%);

    /* W3C */
    background-image: linear-gradient(top, rgba(0,0,0,0.5) 95%,rgba(0,0,0,0.5) 100%);
    -webkit-background-size: 100% $baseline;
    -o-background-size: 100% $baseline;
    background-size: 100% $baseline;


Set $baseline to your base size and include it in your SASS to show faint lines on your body element—then you can adjust margins and paddings as needed.

Leave a Reply

Your email address will not be published. Required fields are marked *