1StopCoders

SASS Font Face Mixin

SASS - 2 Comments - Created by Casey Martin: 2014-05-16 17:02:00

@mixin font-face($style-name, $file, $family, $category:""){
	$filepath: "/root/_fonts/" + $file;
	@font-face {
		font-family: "#{$style-name}";
		src: url($filepath + ".eot");
		src: url($filepath + ".eot?#iefix") format('embedded-opentype'), url($filepath + ".woff") format('woff'), url($filepath + ".ttf")  format('truetype'), url($filepath + ".svg#" + $style-name + "") format('svg');
	}

	%#{$style-name} {
		font: {
			@if $category != "" {
				family: "#{$style-name}", #{$category};
			}
			@else {
				family: "#{$style-name}";
				weight: normal;
			}
		}
	}
}

@include font-face(omnes, 'omnes-regular-webfont', 'omnes', 'serif');

SASS Gradient Background Mixin

SASS - 0 Comments - Created by Casey Martin: 2014-05-16 17:01:00

$vendors: "-moz-", "-webkit-", "-o-", "";
$msvendors: "-ms-", "";

@mixin gradient($from, $to) {
  	background-color: $to;
	background: -webkit-gradient(linear, left top, left bottom, from($from), to($to));
	@each $vendor in $vendors {
		background: #{$vendor}linear-gradient(top,  $from, $to);
	}
  	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$from}', endColorstr='#{$to}');
}

SASS Rounded Corners Mixin

SASS - 0 Comments - Created by Casey Martin: 2014-05-16 16:59:00

$vendors: "-moz-", "-webkit-", "-o-", "";
$msvendors: "-ms-", "";

@mixin rounded($radius: 4px) {
	@each $vendor in $vendors {
 		#{$vendor}border-radius: $radius;
 	}
}

SASS Box Shadow Mixin

SASS - 0 Comments - Created by Casey Martin: 2014-05-16 16:54:00

$vendors: "-moz-", "-webkit-", "-o-", "";
$msvendors: "-ms-", "";

@mixin box-shadow($top, $left, $blur, $color, $inset: false) {
	@if $inset {
    	@each $vendor in $vendors {
			#{$vendor}box-shadow:inset $top $left $blur $color;
		}
  	} @else {
    	@each $vendor in $vendors {
			#{$vendor}box-shadow: $top $left $blur $color;
		}
  	}
	@each $vendor in $msvendors {
		#{$vendor}filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000')";
	}
}

• Prev
• Next