Rem очень крутая штука и вместо того, чтобы пересказывать документацию, почитайте о самом rem в статье Джонатана «Размер шрифта с помощью rem» (англ.), где он объясняет размеры шрифтов с px, em и как rem вступают в нашу игру.
The Stylus CSS
Метод по использованию в stylus rem, включает в себя 2 миксина: один определяет базовый размер шрифта, второй – ремификацию (надеюсь это так звучит, от англ. rem-ify) пикселей:
set-font-size(value) { font-size: value; /* добавляем PX как подстраховку */ if (value is inherit) { /* делаем если нет значения для шрифта */ } else { font-size: remify(value); } } remify(value) { u = unit(value); if (u is 'px') { return unit(value/16, 'rem'); } else { return unit(value, u); } }
16 – это базовый шрифт, из которого рассчитывается ремифицированный пиксель. (по-умолчанию, в современных браузерах используется размер шрифта 16px). Использование миксина будет выглядеть так:
.smaller { set-font-size(13px); } /* на выходе: .smaller { font-size: 13px; font-size: .8125rem; } */
Кстати, не забудьте установить базовый размер шрифта на html элементе, как правило это 100%. Также помните, что миксин использует миксин использует пиксели в качестве запасного размера для шрифта, поэтому если вас не устраивают пиксели, то данное решение вам не подойдет.
Другие интересные миксины для stylus можно найти тут
оригинал David Walsh: Stylus PX to REM Mixin
с/у Талга УтБ
Комментарии закрыты к записи