Sass Utilities

_utils.scss

$bpLarge:1200;
$bpDesktop:960;
$bpTablet:768;

@mixin breakPoint($name) {

	@if $name == large {
		@media (min-width: #{$bpLarge}px) {
			@content;
		}
	} @else if $name == desktop {
		@media (min-width: #{$bpDesktop}px) and (max-width: #{$bpLarge - 1}px) {
			@content;
		}
	} @else if $name == tablet {
		@media (min-width: #{$bpTablet}px) and (max-width: #{$bpDesktop - 1}px) {
			@content;
		}
	} @else if $name == mobile {
		@media (max-width: #{$bpTablet - 1}px)  {
			@content;
		}
	}
}

@mixin vendorPrefix($name, $argument) {
	-webkit-#{$name}: #{$argument};
	-moz-#{$name}: #{$argument};
	-ms-#{$name}: #{$argument};
	-o-#{$name}: #{$argument};
	#{$name}: #{$argument};
}

@mixin listReset(){
	padding: 0;
	margin: 0;
	list-style: none;
}

@mixin regularFont($size:1em,$color:#000000, $lineHeight:1.3, $fontWeight:normal, $fontStyle:normal){
	font-family: 'HelveticaNeue', Helvetica, Arial, sans-serif;
	font-size: $size;
	line-height: $lineHeight;
	color:$color;
	font-weight: $fontWeight;
	font-style: $fontStyle;
}

@mixin boldFont($size:1em, $color:#000000, $lineHeight:1.3){
	@include regularFont($size, $color, $lineHeight, bold);
}

@mixin italicFont($size:1em, $color:#000000, $lineHeight:1.3){
	@include regularFont($size, $color, $lineHeight, normal, italic);
}

@mixin boldItalicFont($size:1em, $color:#000000, $lineHeight:1.3){
	@include regularFont($size, $color, $lineHeight, bold, italic);
}



@mixin backgroundGradient($from:#000000, $to:#000000, $start:top){
	background: $from;
	background: -webkit-linear-gradient($start, $from, $to);
	background: -moz-linear-gradient($start, $from, $to);
	background: -o-linear-gradient($start, $from, $to);
	background: -ms-linear-gradient($start, $from, $to);
	background: linear-gradient($start, $from, $to);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$from', endColorstr='$to',GradientType=0 ); /* IE6-9 */
}

@mixin boxShadow($shadow...){
	@include vendorPrefix(box-shadow, $shadow);
}