Posted By

pankajphartiyal on 09/10/12

Tagged

Versions (?)

Last Edited at 09/10/12 04:41pm

Statistics

Viewed 203 times

Favorited by 0 user(s)

include.css.scss

/ Published in: SASS

Commonly used mixins in SCSS for reducing CSS code

Highlighted TextExpand

/* Font Family */
@mixin include_font($family, $path) {	
	@font-face {
		font-family: "#{$family}";
		src: url("#{$path}.eot");
		src: local('?'), url('#{$path}.woff') format('woff'), url('#{$path}.ttf') format('truetype'), url('#{$path}.svg') format('svg');
		font-weight: normal;
		font-style: normal;
	}
}

/* Cross Browser Mixins */
@mixin border_radius($radius) {
	border-radius:$radius;
	-webkit-border-radius:$radius;
	-moz-border-radius:$radius;
}

@mixin linear_gradient($start_color, $end_color) {
	background: $start_color; /* Old browsers */
	background: -moz-linear-gradient(top,  $start_color 0%, $end_color 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$start_color), color-stop(100%,$end_color)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  $start_color 0%,$end_color 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  $start_color 0%,$end_color 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  $start_color 0%,$end_color 100%); /* IE10+ */
	background: linear-gradient(to bottom,  $start_color 0%,$end_color 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$start_color}', endColorstr='#{$end_color}',GradientType=0 ); /* IE6-9 */
}

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.