Stylus PX na REM Mixin

REM jednotka je nejžhavější věc od Christiny Ricci ... je horko. A obzvlášť žhavé je to u velikosti písma. Spíše než parafrázovat spoustu dokumentace o tom, proč je REM důležité, bych vás rád upozornil na vynikající velikost písma Jonathana Snooka pomocí příspěvku rem, kde vysvětluje velikost pomocí PX , EM a jak REM přichází do obrazu. Zde je návod, jak jsem implementoval REM velikost v rámci stylusu s PX záložní!

Stylus CSS

Moje metoda používá dva mixiny k dosažení tohoto výkonu:jeden k nastavení základu font-size a další pro přepracování pixelové jednotky:

set-font-size(value) {
    font-size: value; /* add PX (or original value) as backup */

    if (value is inherit) {
        /* do nothing, "inherit" has no unit */
    } else {
        font-size: remify(value);
    }
}

remify(value) { /* separate mixin, so it can be used elsewhere */
    u = unit(value);

    if (u is 'px') {
        return unit(value/16, 'rem');
    } else {
        return unit(value, u);
    }
}

16 v rámci remify jednotka představuje základní velikost písma v pixelech, podle které by se měly rems vypočítat. Použití a výstup vypadá následovně:

.smaller {
	set-font-size(13px);
}

/*
	yields:

	.smaller {
		font-size: 13px;
		font-size: .8125rem;
	}

*/

Nezapomeňte nastavit základní velikost písma na html prvek, obvykle 100% . Pamatujte také, že tento mixin předpokládá PX font je předán, takže pokud nechcete použít PX jako záloha to pro vás není řešení. Pokud to však uděláte, používání těchto stylových mixů vám neublíží!