Essential Sass mixins

README.md

Essential Sass mixins

_mixins.scss

// box-sizing
// ------------------------------
@mixin box-sizing($type: border-box) {
	-webkit-box-sizing: $type;
	-moz-box-sizing: $type;
	box-sizing: $type;
}

// Usage
// div {
//  @include box-sizing();
// }


// opacity
// ------------------------------
@mixin opacity($opacity: 0.5) {
	opacity: $opacity;
	filter: alpha(opacity=($opacity * 100));
}

// Usage
// div {
//  @include opacity();
// }


// border-radius
// ------------------------------
@mixin border-radius($value: 3px) {
	-webkit-border-radius: $value;
	-moz-border-radius: $value;
	border-radius: $value;
}

// Usage
// div {
//  @include border-radius();
// }


// circle
// ------------------------------
@mixin circle {
	@include border-radius(100%);
}

// Usage
// div {
//  @include circle();
// }


// font-size
// ------------------------------
@mixin font-size ($size) {
	font-size: $size;
	font-size: ($size / 16px) * 1rem;
}

// Usage
// div {
//  @include font-size(14px);
// }


// box-shadow
// ------------------------------
@mixin box-shadow( $h: 10px , $v: 10px , $b: 0px , $s: 0px , $c: #000000 ) {
	-webkit-box-shadow: $h $v $b $s $c;
	-moz-box-shadow: $h $v $b $s $c;
	box-shadow: $h $v $b $s $c;
}

// Usage
// div {
//   @include box-shadow(8px, 8px);
// }


// xPos
// ------------------------------
@mixin xPos($x) {
	-webkit-transform: translateX($x);
	-moz-transform: translateX($x);
	-ms-transform: translateX($x);
	transform: translateX($x);
}

// Usage
// div {
//   @include xPos(50px);
// }


// vertical-align
// ------------------------------
@mixin vertical-align {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

// Usage
// div {
//   @include vertical-align();
// }


// flexbox
// ------------------------------
@mixin flexbox {
	display:-webkit-box;
	display:-moz-box;
	display:-ms-flexbox;
	display:-webkit-flex; 
	display:flex; 
}

// Usage
// div {
//   @include flexbox();
// }


// flex
// ------------------------------
@mixin flex($values) {
	-webkit-box-flex: $values;
	-moz-box-flex:  $values;
	-ms-flex:  $values;
	-webkit-flex:  $values;
	flex:  $values;
}

// Usage
// div {
//   @include flex(1, 2);
// }


// flex-order
// ------------------------------
@mixin flex-order($order){
	-webkit-box-ordinal-group: $order;
	-moz-box-ordinal-group: $order;
	-ms-flex-order: $order;
	-webkit-order: $order;
	order: $order;
}

// Usage
// div {
//   @include flex-order(3);
// }


// flex-direction
// ------------------------------
@mixin flex-direction($direction) {
 @if $direction == column {
		-webkit-flex-direction: vertical;
		-moz-flex-direction: vertical;
		-ms-flex-direction: column;
		-webkit-flex-direction: column;
		flex-direction: column;
 }  @else  {
		-webkit-flex-direction: horizontal;
		-moz-flex-direction: horizontal;
		-ms-flex-direction: row;
		-webkit-flex-direction: row;
		flex-direction: row;
	}
}

// Usage
// div {
//   @include flex-direction(column);
// }


// gradient
// ------------------------------
@mixin gradient($start-color, $end-color, $orientation) {
	background: $start-color;
	@if $orientation == vertical {
		// vertical
		background: -moz-linear-gradient(top,  $start-color 0%, $end-color 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$start-color), color-stop(100%,$end-color));
		background: -webkit-linear-gradient(top,  $start-color 0%,$end-color 100%);
		background: -o-linear-gradient(top,  $start-color 0%,$end-color 100%);
		background: -ms-linear-gradient(top,  $start-color 0%,$end-color 100%);
		background: linear-gradient(to bottom,  $start-color 0%,$end-color 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=0 );
 } @else if $orientation == horizontal {
 		// horizontal
		background: -moz-linear-gradient(left,  $start-color 0%, $end-color 100%);
		background: -webkit-gradient(linear, left top, right top, color-stop(0%,$start-color), color-stop(100%,$end-color));
		background: -webkit-linear-gradient(left,  $start-color 0%,$end-color 100%);
		background: -o-linear-gradient(left,  $start-color 0%,$end-color 100%);
		background: -ms-linear-gradient(left,  $start-color 0%,$end-color 100%);
		background: linear-gradient(to right,  $start-color 0%,$end-color 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=1 );
 }  @else {
 		// radial
		background: -moz-radial-gradient(center, ellipse cover,  $start-color 0%, $end-color 100%);
		background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,$start-color), color-stop(100%,$end-color));
		background: -webkit-radial-gradient(center, ellipse cover,  $start-color 0%,$end-color 100%);
		background: -o-radial-gradient(center, ellipse cover,  $start-color 0%,$end-color 100%);
		background: -ms-radial-gradient(center, ellipse cover,  $start-color 0%,$end-color 100%);
		background: radial-gradient(ellipse at center,  $start-color 0%,$end-color 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=1 );
	}
}

// Usage
// div {
//   @include gradient(#ff00ff, #ff00cc, vertical);
// }


// ghost-button
// ------------------------------
@mixin ghost-button($font, $font-size, $font-color, $border-size, $border-color, $padding, $transition-speed, $hover-color) {
	display:inline-block;
	text-decoration:none;
	text-transform:uppercase;
	font-family: $font;
	font-size: $font-size;
	color:$font-color;
	border:$border-size solid $border-color;
	padding:$padding;
	-webkit-transition: color $transition-speed, background $transition-speed;
	transition: color $transition-speed, background $transition-speed;
 
 	&:hover {
		background:$border-color;
		color:$hover-color;
	}
}

// Usage
// div {
//   @include ghost-button(“Trebuchet”, 12px, #ffffff, 5px, #34dec6, 4px, 300ms, #000000 );
// }


// break-point
// ------------------------------
@mixin break-point($point) {
	@if $point == desktop {
 		@media only screen and (max-width:50em) {
 			@content;
 		}
	}  @else if $point == mobile {
 		@media only screen and (max-width:20em) {
 			@content;
 		}
 	}
}

// Usage
// div {
// 	margin:5em;
//   @include break-point(mobile) {
//   	margin:2em;
//   }
// }