Skip to content

Instantly share code, notes, and snippets.

@acauamontiel
Last active May 5, 2018 12:28
Show Gist options
  • Save acauamontiel/48c077c13d7c5c4f022f to your computer and use it in GitHub Desktop.
Save acauamontiel/48c077c13d7c5c4f022f to your computer and use it in GitHub Desktop.
Useful mixins for Stylus
/*
* 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}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment