Posted By

pankajphartiyal on 09/10/12


Tagged


Versions (?)

include.css.scss


 / Published in: SASS
 

Commonly used mixins in SCSS for reducing CSS code

  1. /* Font Family */
  2. @mixin include_font($family, $path) {
  3. @font-face {
  4. font-family: "#{$family}";
  5. src: url("#{$path}.eot");
  6. src: local('?'), url('#{$path}.woff') format('woff'), url('#{$path}.ttf') format('truetype'), url('#{$path}.svg') format('svg');
  7. font-weight: normal;
  8. font-style: normal;
  9. }
  10. }
  11.  
  12. /* Cross Browser Mixins */
  13. @mixin border_radius($radius) {
  14. border-radius:$radius;
  15. -webkit-border-radius:$radius;
  16. -moz-border-radius:$radius;
  17. }
  18.  
  19. @mixin linear_gradient($start_color, $end_color) {
  20. background: $start_color; /* Old browsers */
  21. background: -moz-linear-gradient(top, $start_color 0%, $end_color 100%); /* FF3.6+ */
  22. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$start_color), color-stop(100%,$end_color)); /* Chrome,Safari4+ */
  23. background: -webkit-linear-gradient(top, $start_color 0%,$end_color 100%); /* Chrome10+,Safari5.1+ */
  24. background: -o-linear-gradient(top, $start_color 0%,$end_color 100%); /* Opera 11.10+ */
  25. background: -ms-linear-gradient(top, $start_color 0%,$end_color 100%); /* IE10+ */
  26. background: linear-gradient(to bottom, $start_color 0%,$end_color 100%); /* W3C */
  27. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$start_color}', endColorstr='#{$end_color}',GradientType=0 ); /* IE6-9 */
  28. }

Report this snippet  

You need to login to post a comment.