Useful mixins for Stylus

mixins.styl

/*
 * Clearfix
 */
clearfix()
	&:before,
	&:after
		content ' '
		display table

	&:after
		clear both

/*
 * Font Face Mixin
 * Usage:
 * font-face('FamilyName', 'FileName'[, 'weight'])
 */
font-face($family, $file, $weight = 'normal')
	$font-url = '../font/'

	@font-face
		font-family $family
		font-weight $weight
		font-style normal
		src url($font-url + $file + '.eot')
		src url($font-url + $file + '.eot?#iefix') format('embedded-opentype'), url($font-url + $file + '.woff') format('woff'), url($font-url + $file + '.woff2') format('woff2'), url($font-url + $file + '.ttf') format('truetype'), url($font-url + $file + '.svg#' + $file) format('svg')

/*
 * Font-size fallback
 */
font-size(value)
	if typeof(value) is 'unit' and unit(value) is ''
		font-size unit(value, 'px')
		font-size rem(value)
	else
		font-size value

/*
 * Position mixin
 * Mixin to enable the "center" value in "position" CSS property
 * Browser support: IE 9.0+, Chrome 1.0+, Firefox 3.5+, Opera 10.5+, Safari 3.1+
 */
position()
	if arguments is center
		position absolute
		top 50%
		left 50%
		transform translate(-50%, -50%)
	else
		position arguments

/*
 * Convert PX to REM
 */
rem(u)
	return unit(u/16, 'rem')

/*
 * Size mixin
 */
size($width, $height = $width)
	width $width
	height $height

min-size($width, $height = $width)
	min-width $width
	min-height $height

max-size($width, $height = $width)
	max-width $width
	max-height $height


/*
 * Parent selector
 */
parent()
	{selector('\^[-1]')}
		{block}


/*
 * Placeholder
 */
placeholder()
	&::-webkit-input-placeholder
		{block}
	&:-moz-placeholder
		{block}
	&::-moz-placeholder
		{block}
	&:-ms-input-placeholder
		{block}