Cacher is the code snippet organizer for pro developers

/**
 * @outputStyle expanded
 *   outputStyle => nested OR expanded OR compact OR compressed
 * @debugInfo false
 * @lineComments false
 * @outputFile compiled.css
 */

@import "util";

body{
	font-size: px2em(13);
}

@include spacing(0, 40);

/**
 * @outputStyle expanded
 *   outputStyle => nested OR expanded OR compact OR compressed
 * @debugInfo false
 * @lineComments false
 * @outputFile compiled.css
 */
body {
  font-size: 0.813em;
}

.ml0, .mh0, .m_0 {
  margin-left: 0px!important;
}

.mr0, .mh0, .m_0 {
  margin-right: 0px!important;
}

.mt0, .mv0, .m_0 {
  margin-top: 0px!important;
}

.mb0, .mv0, .m_0 {
  margin-bottom: 0px!important;
}

.pl0, .ph0, .p_0 {
  padding-left: 0px!important;
}

.pr0, .ph0, .p_0 {
  padding-right: 0px!important;
}

.pt0, .pv0, .p_0 {
  padding-top: 0px!important;
}

.pb0, .pv0, .p_0 {
  padding-bottom: 0px!important;
}

.ml5, .mh5, .m_5 {
  margin-left: 5px!important;
}

.mr5, .mh5, .m_5 {
  margin-right: 5px!important;
}

.mt5, .mv5, .m_5 {
  margin-top: 5px!important;
}

.mb5, .mv5, .m_5 {
  margin-bottom: 5px!important;
}

.pl5, .ph5, .p_5 {
  padding-left: 5px!important;
}

.pr5, .ph5, .p_5 {
  padding-right: 5px!important;
}

.pt5, .pv5, .p_5 {
  padding-top: 5px!important;
}

.pb5, .pv5, .p_5 {
  padding-bottom: 5px!important;
}

.ml10, .mh10, .m_10 {
  margin-left: 10px!important;
}

.mr10, .mh10, .m_10 {
  margin-right: 10px!important;
}

.mt10, .mv10, .m_10 {
  margin-top: 10px!important;
}

.mb10, .mv10, .m_10 {
  margin-bottom: 10px!important;
}

.pl10, .ph10, .p_10 {
  padding-left: 10px!important;
}

.pr10, .ph10, .p_10 {
  padding-right: 10px!important;
}

.pt10, .pv10, .p_10 {
  padding-top: 10px!important;
}

.pb10, .pv10, .p_10 {
  padding-bottom: 10px!important;
}

.ml15, .mh15, .m_15 {
  margin-left: 15px!important;
}

.mr15, .mh15, .m_15 {
  margin-right: 15px!important;
}

.mt15, .mv15, .m_15 {
  margin-top: 15px!important;
}

.mb15, .mv15, .m_15 {
  margin-bottom: 15px!important;
}

.pl15, .ph15, .p_15 {
  padding-left: 15px!important;
}

.pr15, .ph15, .p_15 {
  padding-right: 15px!important;
}

.pt15, .pv15, .p_15 {
  padding-top: 15px!important;
}

.pb15, .pv15, .p_15 {
  padding-bottom: 15px!important;
}

.ml20, .mh20, .m_20 {
  margin-left: 20px!important;
}

.mr20, .mh20, .m_20 {
  margin-right: 20px!important;
}

.mt20, .mv20, .m_20 {
  margin-top: 20px!important;
}

.mb20, .mv20, .m_20 {
  margin-bottom: 20px!important;
}

.pl20, .ph20, .p_20 {
  padding-left: 20px!important;
}

.pr20, .ph20, .p_20 {
  padding-right: 20px!important;
}

.pt20, .pv20, .p_20 {
  padding-top: 20px!important;
}

.pb20, .pv20, .p_20 {
  padding-bottom: 20px!important;
}

.ml25, .mh25, .m_25 {
  margin-left: 25px!important;
}

.mr25, .mh25, .m_25 {
  margin-right: 25px!important;
}

.mt25, .mv25, .m_25 {
  margin-top: 25px!important;
}

.mb25, .mv25, .m_25 {
  margin-bottom: 25px!important;
}

.pl25, .ph25, .p_25 {
  padding-left: 25px!important;
}

.pr25, .ph25, .p_25 {
  padding-right: 25px!important;
}

.pt25, .pv25, .p_25 {
  padding-top: 25px!important;
}

.pb25, .pv25, .p_25 {
  padding-bottom: 25px!important;
}

.ml30, .mh30, .m_30 {
  margin-left: 30px!important;
}

.mr30, .mh30, .m_30 {
  margin-right: 30px!important;
}

.mt30, .mv30, .m_30 {
  margin-top: 30px!important;
}

.mb30, .mv30, .m_30 {
  margin-bottom: 30px!important;
}

.pl30, .ph30, .p_30 {
  padding-left: 30px!important;
}

.pr30, .ph30, .p_30 {
  padding-right: 30px!important;
}

.pt30, .pv30, .p_30 {
  padding-top: 30px!important;
}

.pb30, .pv30, .p_30 {
  padding-bottom: 30px!important;
}

.ml35, .mh35, .m_35 {
  margin-left: 35px!important;
}

.mr35, .mh35, .m_35 {
  margin-right: 35px!important;
}

.mt35, .mv35, .m_35 {
  margin-top: 35px!important;
}

.mb35, .mv35, .m_35 {
  margin-bottom: 35px!important;
}

.pl35, .ph35, .p_35 {
  padding-left: 35px!important;
}

.pr35, .ph35, .p_35 {
  padding-right: 35px!important;
}

.pt35, .pv35, .p_35 {
  padding-top: 35px!important;
}

.pb35, .pv35, .p_35 {
  padding-bottom: 35px!important;
}

.ml40, .mh40, .m_40 {
  margin-left: 40px!important;
}

.mr40, .mh40, .m_40 {
  margin-right: 40px!important;
}

.mt40, .mv40, .m_40 {
  margin-top: 40px!important;
}

.mb40, .mv40, .m_40 {
  margin-bottom: 40px!important;
}

.pl40, .ph40, .p_40 {
  padding-left: 40px!important;
}

.pr40, .ph40, .p_40 {
  padding-right: 40px!important;
}

.pt40, .pv40, .p_40 {
  padding-top: 40px!important;
}

.pb40, .pv40, .p_40 {
  padding-bottom: 40px!important;
}

//-----------------------
// Minin
//-----------------------
@mixin spacing($min, $max, $step:5, $unit:px) {
	$i : $min;
	@while $i <= $max {
		//margin left
		.ml#{$i} {
			margin-left: #{$i}#{$unit}!important;
		}
		//margin right
		.mr#{$i} {
			margin-right: #{$i}#{$unit}!important;
		}
		//margin top
		.mt#{$i} {
			margin-top: #{$i}#{$unit}!important;
		}
		//margin bottom
		.mb#{$i} {
			margin-bottom: #{$i}#{$unit}!important;
		}
		//margin horizontal
		.mh#{$i} {
			@extend .ml#{$i};
			@extend .mr#{$i};
		}
		//margin virtivcal
		.mv#{$i} {
			@extend .mt#{$i};
			@extend .mb#{$i};
		}
		//margin all
		.m_#{$i} {
			@extend .ml#{$i};
			@extend .mr#{$i};
			@extend .mt#{$i};
			@extend .mb#{$i};
		}
		//padding left
		.pl#{$i} {
			padding-left: #{$i}#{$unit}!important;
		}
		//padding right
		.pr#{$i} {
			padding-right: #{$i}#{$unit}!important;
		}
		//padding top
		.pt#{$i} {
			padding-top: #{$i}#{$unit}!important;
		}
		//padding bottom
		.pb#{$i} {
			padding-bottom: #{$i}#{$unit}!important;
		}
		//padding horizontal
		.ph#{$i} {
			@extend .pl#{$i};
			@extend .pr#{$i};
		}
		///padding virtivcal
		.pv#{$i} {
			@extend .pt#{$i};
			@extend .pb#{$i};
		}
		//padding all
		.p_#{$i} {
			@extend .pl#{$i};
			@extend .pr#{$i};
			@extend .pt#{$i};
			@extend .pb#{$i};
		}
		$i : $i + $step;
	}
}

//-----------------------
// Functions
//-----------------------
@function px2em($fontSize, $baseSize : 16){
	@return ($fontSize / $baseSize) + 0em
}

@function em2px($fontSize, $baseSize : 16){
	@return ($fontSize * $baseSize) + 0px;
}