/ Published in: SASS
Commonly used mixins in SCSS for reducing CSS code
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
/* 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 */ }