[stylus] breakpoints smixin

breakpoints.styl

// ---------------------
// breakpoints mixin
// ---------------------


// define breakpoints (you can modify or rename them, or create as many as you like)

breakpoints = {
	xs: 0,
	sm: 480px,
	md: 768px,
	lg: 992px,
	xg: 1270px,
}


// create mixins by applying the breakpoints above

above(breakpoint)
	if breakpoints[breakpoint] > 0
		@media only screen and (min-width: breakpoints[breakpoint])
			{block}
	else
		{block}

below(breakpoint)
	@media only screen and (max-width: (breakpoints[breakpoint] - 1px))
		if block
			{block}

between(breakpoint_1, breakpoint_2)
	@media only screen and (min-width: breakpoints[breakpoint_1]) and (max-width: (breakpoints[breakpoint_2] - 1px))
		if block
			{block}








//////////////////////////////////////
//     _                    _       //
//    | |                  | |      //
//    | | ___   _ _ __  ___| |_     //
//    | |/ / | | | '_ \/ __| __|    //
//    |   <| |_| | | | \__ \ |_     //
//    |_|\_\\__,_|_| |_|___/\__|    //
//                                  //
//    - - - - - - - - - - - - -     //
//    kunstdesign.com.br            //
//    2017 ® leonardo dino          //
//    - - - - - - - - - - - - -     //
//                                  //
//////////////////////////////////////

usage.styl

// ---------------------
// usage
// ---------------------


.selector
	font-size: 16px
	+above(md)
		font-size: 20px