_mixin.scss 3.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. $roboto_light: "Roboto-Light";
  2. $file: "Roboto-Light-webfont";
  3. $family: "roboto_light/";
  4. $category: "sans-serif";
  5. @mixin font-face($roboto_light, $file, $family, $category:"") {
  6. $filepath: "../fonts/" + $family + "/" + $file;
  7. @font-face {
  8. font-family: "#{$roboto_light}";
  9. src: url($filepath + ".eot");
  10. src: url($filepath + ".eot?#iefix") format('embedded-opentype'), url($filepath + ".woff") format('woff'), url($filepath + ".ttf") format('truetype'), url($filepath + ".svg#" + $roboto_light + "") format('svg');
  11. }
  12. %#{$roboto_light} {
  13. font: {
  14. @if $category != "" {
  15. family: "#{$roboto_light}", #{$category};
  16. }
  17. @else {
  18. family: "#{$roboto_light}";
  19. weight: normal;
  20. }
  21. }
  22. }
  23. }
  24. $roboto_regular: "Roboto-regular";
  25. $file2: "Roboto-Regular-webfont";
  26. $family2: "roboto_regular/";
  27. @mixin font-face($roboto_regular, $file2, $family2, $category:"") {
  28. $filepath: "../fonts/" + $family2 + "/" + $file2;
  29. @font-face {
  30. font-family: "#{$roboto_regular}";
  31. src: url($filepath + ".eot");
  32. src: url($filepath + ".eot?#iefix") format('embedded-opentype'), url($filepath + ".woff") format('woff'), url($filepath + ".ttf") format('truetype'), url($filepath + ".svg#" + $roboto_regular + "") format('svg');
  33. }
  34. %#{$roboto_regular} {
  35. font: {
  36. @if $category != "" {
  37. family: "#{$roboto_regular}", #{$category};
  38. }
  39. @else {
  40. family: "#{$roboto_regular}";
  41. weight: normal;
  42. }
  43. }
  44. }
  45. }
  46. $roboto_medium: "Roboto-Medium";
  47. $file3: "Roboto-Medium-webfont";
  48. $family3: "roboto_medium/";
  49. @mixin font-face($roboto_medium, $file3, $family3, $category:"") {
  50. $filepath: "../fonts/" + $family3 + "/" + $file3;
  51. @font-face {
  52. font-family: "#{$roboto_medium}";
  53. src: url($filepath + ".eot");
  54. src: url($filepath + ".eot?#iefix") format('embedded-opentype'), url($filepath + ".woff") format('woff'), url($filepath + ".ttf") format('truetype'), url($filepath + ".svg#" + $roboto_medium + "") format('svg');
  55. }
  56. %#{$roboto_medium} {
  57. font: {
  58. @if $category != "" {
  59. family: "#{$roboto_medium}", #{$category};
  60. }
  61. @else {
  62. family: "#{$roboto_medium}";
  63. weight: normal;
  64. }
  65. }
  66. }
  67. }
  68. $roboto_bold: "Roboto-Bold";
  69. $file4: "Roboto-Bold-webfont";
  70. $family4: "roboto_bold/";
  71. @mixin font-face($roboto_bold, $file4, $family4, $category:"") {
  72. $filepath: "../fonts/" + $family4 + "/" + $file4;
  73. @font-face {
  74. font-family: "#{$roboto_bold}";
  75. src: url($filepath + ".eot");
  76. src: url($filepath + ".eot?#iefix") format('embedded-opentype'), url($filepath + ".woff") format('woff'), url($filepath + ".ttf") format('truetype'), url($filepath + ".svg#" + $roboto_bold + "") format('svg');
  77. }
  78. %#{$roboto_bold} {
  79. font: {
  80. @if $category != "" {
  81. family: "#{$roboto_bold}", #{$category};
  82. }
  83. @else {
  84. family: "#{$roboto_bold}";
  85. weight: normal;
  86. }
  87. }
  88. }
  89. }