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

с/у Талга УтБ

Использую часто хороший плагин jQuery Form Styler от Dimox. Там  же можете почитать.

Суть плагина в стилизации чекбоксов, радиокнопок, селектов и файловых полей.

Я использую препроцессор stylus, и поэтому переписал стили для данного плагина.

Всем кому вдруг понадобиться можно забрать на github.

Визуально ничего не изменилось, просто все стили были переведены на препроцессор.

Итак, давайте будем расти как верстальщики. Для качественной верстки и удобства (особенно для больших проектов) было придуманы css препроцессоры. Далее поговорим немного о них.

Давайте начнем с того, что обычный css нас многим не устраивает. А если вы считает, что все круто, то тогда не читайте дальше, а идите спать. Поэтому некоторые вещи мы делаем на javascript либо что-нибудь эдакое придумываем.

Здесь вы сможете найти полезные сниппеты для css препроцессора stylus. (подробнее о самом препроцессоре здесь) Большинство из них ориентированы на кроссбраузерность. Все браузеры, которые поддерживают те или иные свойства, можно посмотреть на caniuse

Все сниппеты можно добавить в отдельно созданный файл, например, config.styl и через @import 'config' добавить в основной файл stylus.

Stylus border-radius

border-radius()
	-moz-border-radius arguments /* Firefox */
	-webkit-border-radius arguments /* Chrome, Safari */
	-khtml-border-radius arguments /* KHTML */
	border-radius arguments /* Css 3*/
	behavior unquote('url(pie/PIE.htc)') /* для поддержки плохих IE */

Для того чтобы border-radius поддерживался в IE можно использовать PIE.htc (подробности здесь), либо другую альтернативу.

Stylus box-shadow

box-shadow()
	-moz-border-shadow arguments /* Firefox */
	-webkit-border-shadow arguments /* Chrome, Safari */
	border-shadow arguments /* Css 3*/

Stylus transition

transition()
	-webkit-transition arguments /* Chrome, Safari */
	-moz-transition arguments /* Firefox */
	-o-transition arguments /* Opera */
	-ms-transition arguments /* IE новые */
	transition arguments /* Css 3*/

Stylus opacity

opacity(n)
    -ms-filter unquote('"progid:DXImageTransform.Microsoft.Alpha(Opacity='+n*100+')"') /* IE */
    filter unquote('alpha(opacity='+n*100+')')
    -moz-opacity n /* Firefox */
    -khtml-opacity n /* KHTML */
    opacity n /* Css 3*/