_mixin.scss 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. $CooperHewitt: "CooperHewitt";
  2. $file: "CooperHewitt-Bold";
  3. $family: "CooperHewitt";
  4. $category: "sans-serif";
  5. @mixin font-face($CooperHewitt, $file, $family, $category:"") {
  6. $filepath: "../fonts/" + $family + "/" + $file;
  7. @font-face {
  8. font-family: "#{$CooperHewitt}";
  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#" + $CooperHewitt + "") format('svg');
  11. }
  12. %#{$CooperHewitt} {
  13. font: {
  14. @if $category != "" {
  15. family: "#{$CooperHewitt}", #{$category};
  16. }
  17. @else {
  18. family: "#{$CooperHewitt}";
  19. weight: normal;
  20. }
  21. }
  22. }
  23. }
  24. $CooperHewitt-italic: "CooperHewitt-BoldItalic";
  25. $file2: "CooperHewitt-BoldItalic";
  26. $family2: "CooperHewitt";
  27. $category2: "sans-serif";
  28. @mixin font-face($CooperHewitt-italic, $file2, $family2, $category2:"") {
  29. $filepath: "../fonts/" + $family2 + "/" + $file2;
  30. @font-face {
  31. font-family: "#{$CooperHewitt-italic}";
  32. src: url($filepath + ".eot");
  33. src: url($filepath + ".eot?#iefix") format('embedded-opentype'), url($filepath + ".woff") format('woff'), url($filepath + ".ttf") format('truetype'), url($filepath + ".svg#" + $CooperHewitt-italic + "") format('svg');
  34. }
  35. %#{$CooperHewitt-italic} {
  36. font: {
  37. @if $category2 != "" {
  38. family: "#{$CooperHewitt-italic}", #{$category2};
  39. }
  40. @else {
  41. family: "#{$CooperHewitt-italic}";
  42. // weight: itali;
  43. }
  44. }
  45. }
  46. }
  47. $rubik: "rubik";
  48. $file3: "Rubik-Light";
  49. $family3: "rubik";
  50. $category3: "sans-serif";
  51. @mixin font-face($rubik, $file3, $family3, $category3:"") {
  52. $filepath: "../fonts/" + $family3 + "/" + $file3;
  53. @font-face {
  54. font-family: "#{$rubik}";
  55. src: url($filepath + ".eot");
  56. src: url($filepath + ".eot?#iefix") format('embedded-opentype'), url($filepath + ".woff") format('woff'), url($filepath + ".ttf") format('truetype'), url($filepath + ".svg#" + $rubik + "") format('svg');
  57. }
  58. %#{$rubik} {
  59. font: {
  60. @if $category3 != "" {
  61. family: "#{$rubik}", #{$category3};
  62. }
  63. @else {
  64. family: "#{$rubik}";
  65. weight: normal;
  66. }
  67. }
  68. }
  69. }
  70. $rubik-B: "Rubik-Bold";
  71. $file4: "Rubik-Bold";
  72. @mixin font-face($rubik-B, $file4, $family3, $category3:"") {
  73. $filepath: "../fonts/" + $family3 + "/" + $file4;
  74. @font-face {
  75. font-family: "#{$rubik-B}";
  76. src: url($filepath + ".eot");
  77. src: url($filepath + ".eot?#iefix") format('embedded-opentype'), url($filepath + ".woff") format('woff'), url($filepath + ".ttf") format('truetype'), url($filepath + ".svg#" + $rubik-B + "") format('svg');
  78. }
  79. %#{$rubik-B} {
  80. font: {
  81. @if $category3 != "" {
  82. family: "#{$rubik-B}", #{$category3};
  83. }
  84. @else {
  85. family: "#{$rubik-B}";
  86. weight: normal;
  87. }
  88. }
  89. }
  90. }
  91. $rubik-MI: "Rubik-MediumItalic";
  92. $file6: "Rubik-MediumItalic";
  93. @mixin font-face($rubik-MI, $file6, $family3, $category3:"") {
  94. $filepath: "../fonts/" + $family3 + "/" + $file6;
  95. @font-face {
  96. font-family: "#{$rubik-MI}";
  97. src: url($filepath + ".eot");
  98. src: url($filepath + ".eot?#iefix") format('embedded-opentype'), url($filepath + ".woff") format('woff'), url($filepath + ".ttf") format('truetype'), url($filepath + ".svg#" + $rubik-MI + "") format('svg');
  99. }
  100. %#{$rubik-MI} {
  101. font: {
  102. @if $category3 != "" {
  103. family: "#{$rubik-MI}", #{$category3};
  104. }
  105. @else {
  106. family: "#{$rubik-MI}";
  107. weight: normal;
  108. }
  109. }
  110. }
  111. }
  112. $cmu: "cmu-concrete-ita";
  113. $file5: "cmunoti";
  114. $family5: "Concrete";
  115. $category5: "serif";
  116. @mixin font-face($cmu, $file5, $family5, $category5:"") {
  117. $filepath: "../fonts/" + $family5 + "/" + $file5;
  118. @font-face {
  119. font-family: "#{$cmu}";
  120. src: url($filepath + ".eot");
  121. src: url($filepath + ".eot?#iefix") format('embedded-opentype'), url($filepath + ".woff") format('woff'), url($filepath + ".ttf") format('truetype'), url($filepath + ".svg#" + $cmu + "") format('svg');
  122. }
  123. %#{$cmu} {
  124. font: {
  125. @if $category5 != "" {
  126. family: "#{$cmu}", #{$category5};
  127. }
  128. @else {
  129. family: "#{$cmu}";
  130. weight: normal;
  131. }
  132. }
  133. }
  134. }