Stylus Mixins

A collection of shorthand mixins for stylus-lang

Usage

yarn add -D stylus-mixins

@import "stylus-mixins";

Mixins

Border

Mixin	Property
b	border
bt	border-top
bl	border-left
br	border-right
by	border-top & border-bottom
bx	border-left & border-right
r	border-radius

Colors

The c mixin

The c mixin works like this

// c <color> <border-color> <background-color> <color-important> <border-color-important> <background-color-important>

input
  c white gray black 1 0 1

would expand to

input {
  color: white !important;
  border-color: gray;
  background-color: black !important;
}

note you can use 0 to omit arguments

Mixin	Property
c	see below
bg	background
fg	color

Misc

Mixin	Property
an	animation
d	display
bs	box-shadow
tr	transition
op	opacity

Spacing

Mixin	Property
p	padding
pb	padding-bottom
pl	padding-left
pr	padding-right
px	padding-left & padding-right
py	padding-top & padding-bottom
m	margin
mb	margin-bottom
ml	margin-left
mr	margin-right
mx	margin-left & margin-right
my	margin-top & margin-bottom

Typography

Mixin	Property
ff	font-family
fs	font-size
fw	font-weight
td	text-decoration

Todo

[ ] - Add tests