Extracted mixins to the separate files and separated normal and italic variants

README.md

@@ -31,6 +31,11 @@ of the following files:
 * `roboto-fontface-(thin|light|regular|medium|bold|black).scss`
 * `roboto-fontface-(thin|light|regular|medium|bold|black).less`
 
+Their italic variants can be imported by adding `-italic` suffix:
+
+* `roboto-fontface-(thin|light|regular|medium|bold|black)-italic.scss`
+* `roboto-fontface-(thin|light|regular|medium|bold|black)-italic.less`
+
 ## Hinting
 
 Some of the included font files have [hinting](http://en.wikipedia.org/wiki/Font_hinting).

css/mixins.less

@@ -0,0 +1,34 @@
+@roboto-font-path: '../fonts';
+
+.roboto-font(@type, @weight, @style) {
+    @font-face {
+        font-family: 'Roboto';
+        src: url('@{roboto-font-path}/Roboto-@{type}.eot');
+        src: local('Roboto @{type}'),
+             local('Roboto-@{type}'),
+             url('@{roboto-font-path}/Roboto-@{type}.eot?#iefix') format('embedded-opentype'),
+             url('@{roboto-font-path}/Roboto-@{type}.woff2') format('woff2'),
+             url('@{roboto-font-path}/Roboto-@{type}.woff') format('woff'),
+             url('@{roboto-font-path}/Roboto-@{type}.ttf') format('truetype'),
+             url('@{roboto-font-path}/Roboto-@{type}.svg#Roboto') format('svg');
+        font-weight: @weight;
+        font-style: @style;
+    }
+
+    @font-face {
+        font-family: 'Roboto-@{type}';
+        src: url('@{roboto-font-path}/Roboto-@{type}.eot');
+        src: local('Roboto @{type}'),
+             local('Roboto-@{type}'),
+             url('@{roboto-font-path}/Roboto-@{type}.eot?#iefix') format('embedded-opentype'),
+             url('@{roboto-font-path}/Roboto-@{type}.woff2') format('woff2'),
+             url('@{roboto-font-path}/Roboto-@{type}.woff') format('woff'),
+             url('@{roboto-font-path}/Roboto-@{type}.ttf') format('truetype'),
+             url('@{roboto-font-path}/Roboto-@{type}.svg#Roboto') format('svg');
+    }
+}
+
+.roboto-font-pair(@type, @weight) {
+    .roboto-font('@{type}', @weight, normal);
+    .roboto-font('@{type}Italic', @weight, italic);
+}

css/mixins.scss

@@ -0,0 +1,34 @@
+$roboto-font-path: '../fonts' !default;
+
+@mixin roboto-font($type, $weight, $style) {
+    @font-face {
+        font-family: 'Roboto';
+        src: url('#{$roboto-font-path}/Roboto-#{$type}.eot');
+        src: local('Roboto #{$type}'),
+             local('Roboto-#{$type}'),
+             url('#{$roboto-font-path}/Roboto-#{$type}.eot?#iefix') format('embedded-opentype'),
+             url('#{$roboto-font-path}/Roboto-#{$type}.woff2') format('woff2'),
+             url('#{$roboto-font-path}/Roboto-#{$type}.woff') format('woff'),
+             url('#{$roboto-font-path}/Roboto-#{$type}.ttf') format('truetype'),
+             url('#{$roboto-font-path}/Roboto-#{$type}.svg#Roboto') format('svg');
+        font-weight: $weight;
+        font-style: $style;
+    }
+
+    @font-face {
+        font-family: 'Roboto-#{$type}';
+        src: url('#{$roboto-font-path}/Roboto-#{$type}.eot');
+        src: local('Roboto #{$type}'),
+             local('Roboto-#{$type}'),
+             url('#{$roboto-font-path}/Roboto-#{$type}.eot?#iefix') format('embedded-opentype'),
+             url('#{$roboto-font-path}/Roboto-#{$type}.woff2') format('woff2'),
+             url('#{$roboto-font-path}/Roboto-#{$type}.woff') format('woff'),
+             url('#{$roboto-font-path}/Roboto-#{$type}.ttf') format('truetype'),
+             url('#{$roboto-font-path}/Roboto-#{$type}.svg#Roboto') format('svg');
+    }
+}
+
+@mixin roboto-font-pair($type, $weight) {
+    @include roboto-font($type, $weight, normal);
+    @include roboto-font(#{$type}Italic, $weight, italic);
+}

css/roboto-fontface-black-italic.less

@@ -0,0 +1,3 @@
+@import "mixins";
+
+.roboto-font('BlackItalic', 900, italic);

css/roboto-fontface-black-italic.scss

@@ -0,0 +1,3 @@
+@import "mixins";
+
+@include roboto-font('BlackItalic', 900, italic);

css/roboto-fontface-black.less

@@ -1,36 +1,3 @@
-@roboto-font-path: '../fonts';
+@import "mixins";
 
-.roboto-font(@type, @weight, @style) {
+.roboto-font('Black', 900, normal);
-    @font-face {
-        font-family: 'Roboto';
-        src: url('@{roboto-font-path}/Roboto-@{type}.eot');
-        src: local('Roboto @{type}'),
-             local('Roboto-@{type}'),
-             url('@{roboto-font-path}/Roboto-@{type}.eot?#iefix') format('embedded-opentype'),
-             url('@{roboto-font-path}/Roboto-@{type}.woff2') format('woff2'),
-             url('@{roboto-font-path}/Roboto-@{type}.woff') format('woff'),
-             url('@{roboto-font-path}/Roboto-@{type}.ttf') format('truetype'),
-             url('@{roboto-font-path}/Roboto-@{type}.svg#Roboto') format('svg');
-        font-weight: @weight;
-        font-style: @style;
-    }
-
-    @font-face {
-        font-family: 'Roboto-@{type}';
-        src: url('@{roboto-font-path}/Roboto-@{type}.eot');
-        src: local('Roboto @{type}'),
-             local('Roboto-@{type}'),
-             url('@{roboto-font-path}/Roboto-@{type}.eot?#iefix') format('embedded-opentype'),
-             url('@{roboto-font-path}/Roboto-@{type}.woff2') format('woff2'),
-             url('@{roboto-font-path}/Roboto-@{type}.woff') format('woff'),
-             url('@{roboto-font-path}/Roboto-@{type}.ttf') format('truetype'),
-             url('@{roboto-font-path}/Roboto-@{type}.svg#Roboto') format('svg');
-    }
-}
-
-.roboto-font-pair(@type, @weight) {
-    .roboto-font('@{type}', @weight, normal);
-    .roboto-font('@{type}Italic', @weight, italic);
-}
-
-.roboto-font-pair('Black', 900);

css/roboto-fontface-black.scss

@@ -1,36 +1,3 @@
-$roboto-font-path: '../fonts' !default;
+@import "mixins";
 
-@mixin roboto-font($type, $weight, $style: normal) {
+@include roboto-font('Black', 900, normal);
-    @font-face {
-        font-family: 'Roboto';
-        src: url('#{$roboto-font-path}/Roboto-#{$type}.eot');
-        src: local('Roboto #{$type}'),
-             local('Roboto-#{$type}'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.eot?#iefix') format('embedded-opentype'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.woff2') format('woff2'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.woff') format('woff'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.ttf') format('truetype'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.svg#Roboto') format('svg');
-        font-weight: $weight;
-        font-style: $style;
-    }
-
-    @font-face {
-        font-family: 'Roboto-#{$type}';
-        src: url('#{$roboto-font-path}/Roboto-#{$type}.eot');
-        src: local('Roboto #{$type}'),
-             local('Roboto-#{$type}'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.eot?#iefix') format('embedded-opentype'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.woff2') format('woff2'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.woff') format('woff'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.ttf') format('truetype'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.svg#Roboto') format('svg');
-    }
-}
-
-@mixin roboto-font-pair($type, $weight) {
-    @include roboto-font($type, $weight);
-    @include roboto-font(#{$type}Italic, $weight, italic);
-}
-
-@include roboto-font-pair('Black', 900);

css/roboto-fontface-bold-italic.less

@@ -0,0 +1,3 @@
+@import "mixins";
+
+.roboto-font('BoldItalic', 700, italic);

css/roboto-fontface-bold-italic.scss

@@ -0,0 +1,3 @@
+@import "mixins";
+
+@include roboto-font('BoldItalic', 700, italic);

css/roboto-fontface-bold.less

@@ -1,36 +1,3 @@
-@roboto-font-path: '../fonts';
+@import "mixins";
 
-.roboto-font(@type, @weight, @style) {
+.roboto-font('Bold', 700, normal);
-    @font-face {
-        font-family: 'Roboto';
-        src: url('@{roboto-font-path}/Roboto-@{type}.eot');
-        src: local('Roboto @{type}'),
-             local('Roboto-@{type}'),
-             url('@{roboto-font-path}/Roboto-@{type}.eot?#iefix') format('embedded-opentype'),
-             url('@{roboto-font-path}/Roboto-@{type}.woff2') format('woff2'),
-             url('@{roboto-font-path}/Roboto-@{type}.woff') format('woff'),
-             url('@{roboto-font-path}/Roboto-@{type}.ttf') format('truetype'),
-             url('@{roboto-font-path}/Roboto-@{type}.svg#Roboto') format('svg');
-        font-weight: @weight;
-        font-style: @style;
-    }
-
-    @font-face {
-        font-family: 'Roboto-@{type}';
-        src: url('@{roboto-font-path}/Roboto-@{type}.eot');
-        src: local('Roboto @{type}'),
-             local('Roboto-@{type}'),
-             url('@{roboto-font-path}/Roboto-@{type}.eot?#iefix') format('embedded-opentype'),
-             url('@{roboto-font-path}/Roboto-@{type}.woff2') format('woff2'),
-             url('@{roboto-font-path}/Roboto-@{type}.woff') format('woff'),
-             url('@{roboto-font-path}/Roboto-@{type}.ttf') format('truetype'),
-             url('@{roboto-font-path}/Roboto-@{type}.svg#Roboto') format('svg');
-    }
-}
-
-.roboto-font-pair(@type, @weight) {
-    .roboto-font('@{type}', @weight, normal);
-    .roboto-font('@{type}Italic', @weight, italic);
-}
-
-.roboto-font-pair('Bold', 700);

css/roboto-fontface-bold.scss

@@ -1,36 +1,3 @@
-$roboto-font-path: '../fonts' !default;
+@import "mixins";
 
-@mixin roboto-font($type, $weight, $style: normal) {
+@include roboto-font('Bold', 700, normal);
-    @font-face {
-        font-family: 'Roboto';
-        src: url('#{$roboto-font-path}/Roboto-#{$type}.eot');
-        src: local('Roboto #{$type}'),
-             local('Roboto-#{$type}'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.eot?#iefix') format('embedded-opentype'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.woff2') format('woff2'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.woff') format('woff'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.ttf') format('truetype'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.svg#Roboto') format('svg');
-        font-weight: $weight;
-        font-style: $style;
-    }
-
-    @font-face {
-        font-family: 'Roboto-#{$type}';
-        src: url('#{$roboto-font-path}/Roboto-#{$type}.eot');
-        src: local('Roboto #{$type}'),
-             local('Roboto-#{$type}'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.eot?#iefix') format('embedded-opentype'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.woff2') format('woff2'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.woff') format('woff'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.ttf') format('truetype'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.svg#Roboto') format('svg');
-    }
-}
-
-@mixin roboto-font-pair($type, $weight) {
-    @include roboto-font($type, $weight);
-    @include roboto-font(#{$type}Italic, $weight, italic);
-}
-
-@include roboto-font-pair('Bold', 700);

css/roboto-fontface-light-italic.less

@@ -0,0 +1,3 @@
+@import "mixins";
+
+.roboto-font('LightItalic', 300, italic);

css/roboto-fontface-light-italic.scss

@@ -0,0 +1,3 @@
+@import "mixins";
+
+@include roboto-font('LightItalic', 300, italic);

css/roboto-fontface-light.less

@@ -1,36 +1,3 @@
-@roboto-font-path: '../fonts';
+@import "mixins";
 
-.roboto-font(@type, @weight, @style) {
+.roboto-font('Light', 300, normal);
-    @font-face {
-        font-family: 'Roboto';
-        src: url('@{roboto-font-path}/Roboto-@{type}.eot');
-        src: local('Roboto @{type}'),
-             local('Roboto-@{type}'),
-             url('@{roboto-font-path}/Roboto-@{type}.eot?#iefix') format('embedded-opentype'),
-             url('@{roboto-font-path}/Roboto-@{type}.woff2') format('woff2'),
-             url('@{roboto-font-path}/Roboto-@{type}.woff') format('woff'),
-             url('@{roboto-font-path}/Roboto-@{type}.ttf') format('truetype'),
-             url('@{roboto-font-path}/Roboto-@{type}.svg#Roboto') format('svg');
-        font-weight: @weight;
-        font-style: @style;
-    }
-
-    @font-face {
-        font-family: 'Roboto-@{type}';
-        src: url('@{roboto-font-path}/Roboto-@{type}.eot');
-        src: local('Roboto @{type}'),
-             local('Roboto-@{type}'),
-             url('@{roboto-font-path}/Roboto-@{type}.eot?#iefix') format('embedded-opentype'),
-             url('@{roboto-font-path}/Roboto-@{type}.woff2') format('woff2'),
-             url('@{roboto-font-path}/Roboto-@{type}.woff') format('woff'),
-             url('@{roboto-font-path}/Roboto-@{type}.ttf') format('truetype'),
-             url('@{roboto-font-path}/Roboto-@{type}.svg#Roboto') format('svg');
-    }
-}
-
-.roboto-font-pair(@type, @weight) {
-    .roboto-font('@{type}', @weight, normal);
-    .roboto-font('@{type}Italic', @weight, italic);
-}
-
-.roboto-font-pair('Light', 300);

css/roboto-fontface-light.scss

@@ -1,36 +1,3 @@
-$roboto-font-path: '../fonts' !default;
+@import "mixins";
 
-@mixin roboto-font($type, $weight, $style: normal) {
+@include roboto-font('Light', 300, normal);
-    @font-face {
-        font-family: 'Roboto';
-        src: url('#{$roboto-font-path}/Roboto-#{$type}.eot');
-        src: local('Roboto #{$type}'),
-             local('Roboto-#{$type}'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.eot?#iefix') format('embedded-opentype'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.woff2') format('woff2'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.woff') format('woff'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.ttf') format('truetype'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.svg#Roboto') format('svg');
-        font-weight: $weight;
-        font-style: $style;
-    }
-
-    @font-face {
-        font-family: 'Roboto-#{$type}';
-        src: url('#{$roboto-font-path}/Roboto-#{$type}.eot');
-        src: local('Roboto #{$type}'),
-             local('Roboto-#{$type}'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.eot?#iefix') format('embedded-opentype'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.woff2') format('woff2'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.woff') format('woff'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.ttf') format('truetype'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.svg#Roboto') format('svg');
-    }
-}
-
-@mixin roboto-font-pair($type, $weight) {
-    @include roboto-font($type, $weight);
-    @include roboto-font(#{$type}Italic, $weight, italic);
-}
-
-@include roboto-font-pair('Light', 300);

css/roboto-fontface-medium-italic.less

@@ -0,0 +1,3 @@
+@import "mixins";
+
+.roboto-font('MediumItalic', 500, italic);

css/roboto-fontface-medium-italic.scss

@@ -0,0 +1,3 @@
+@import "mixins";
+
+@include roboto-font('MediumItalic', 500, italic);

css/roboto-fontface-medium.less

@@ -1,36 +1,3 @@
-@roboto-font-path: '../fonts';
+@import "mixins";
 
-.roboto-font(@type, @weight, @style) {
+.roboto-font('Medium', 500, normal);
-    @font-face {
-        font-family: 'Roboto';
-        src: url('@{roboto-font-path}/Roboto-@{type}.eot');
-        src: local('Roboto @{type}'),
-             local('Roboto-@{type}'),
-             url('@{roboto-font-path}/Roboto-@{type}.eot?#iefix') format('embedded-opentype'),
-             url('@{roboto-font-path}/Roboto-@{type}.woff2') format('woff2'),
-             url('@{roboto-font-path}/Roboto-@{type}.woff') format('woff'),
-             url('@{roboto-font-path}/Roboto-@{type}.ttf') format('truetype'),
-             url('@{roboto-font-path}/Roboto-@{type}.svg#Roboto') format('svg');
-        font-weight: @weight;
-        font-style: @style;
-    }
-
-    @font-face {
-        font-family: 'Roboto-@{type}';
-        src: url('@{roboto-font-path}/Roboto-@{type}.eot');
-        src: local('Roboto @{type}'),
-             local('Roboto-@{type}'),
-             url('@{roboto-font-path}/Roboto-@{type}.eot?#iefix') format('embedded-opentype'),
-             url('@{roboto-font-path}/Roboto-@{type}.woff2') format('woff2'),
-             url('@{roboto-font-path}/Roboto-@{type}.woff') format('woff'),
-             url('@{roboto-font-path}/Roboto-@{type}.ttf') format('truetype'),
-             url('@{roboto-font-path}/Roboto-@{type}.svg#Roboto') format('svg');
-    }
-}
-
-.roboto-font-pair(@type, @weight) {
-    .roboto-font('@{type}', @weight, normal);
-    .roboto-font('@{type}Italic', @weight, italic);
-}
-
-.roboto-font-pair('Medium', 500);

css/roboto-fontface-medium.scss

@@ -1,36 +1,3 @@
-$roboto-font-path: '../fonts' !default;
+@import "mixins";
 
-@mixin roboto-font($type, $weight, $style: normal) {
+@include roboto-font('Medium', 500, normal);
-    @font-face {
-        font-family: 'Roboto';
-        src: url('#{$roboto-font-path}/Roboto-#{$type}.eot');
-        src: local('Roboto #{$type}'),
-             local('Roboto-#{$type}'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.eot?#iefix') format('embedded-opentype'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.woff2') format('woff2'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.woff') format('woff'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.ttf') format('truetype'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.svg#Roboto') format('svg');
-        font-weight: $weight;
-        font-style: $style;
-    }
-
-    @font-face {
-        font-family: 'Roboto-#{$type}';
-        src: url('#{$roboto-font-path}/Roboto-#{$type}.eot');
-        src: local('Roboto #{$type}'),
-             local('Roboto-#{$type}'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.eot?#iefix') format('embedded-opentype'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.woff2') format('woff2'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.woff') format('woff'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.ttf') format('truetype'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.svg#Roboto') format('svg');
-    }
-}
-
-@mixin roboto-font-pair($type, $weight) {
-    @include roboto-font($type, $weight);
-    @include roboto-font(#{$type}Italic, $weight, italic);
-}
-
-@include roboto-font-pair('Medium', 500);

css/roboto-fontface-regular-italic.less

@@ -0,0 +1,3 @@
+@import "mixins";
+
+.roboto-font('RegularItalic', 400, italic);

css/roboto-fontface-regular-italic.scss

@@ -0,0 +1,3 @@
+@import "mixins";
+
+@include roboto-font('RegularItalic', 400, italic);

css/roboto-fontface-regular.less

@@ -1,36 +1,3 @@
-@roboto-font-path: '../fonts';
+@import "mixins";
 
-.roboto-font(@type, @weight, @style) {
+.roboto-font('Regular', 400, normal);
-    @font-face {
-        font-family: 'Roboto';
-        src: url('@{roboto-font-path}/Roboto-@{type}.eot');
-        src: local('Roboto @{type}'),
-             local('Roboto-@{type}'),
-             url('@{roboto-font-path}/Roboto-@{type}.eot?#iefix') format('embedded-opentype'),
-             url('@{roboto-font-path}/Roboto-@{type}.woff2') format('woff2'),
-             url('@{roboto-font-path}/Roboto-@{type}.woff') format('woff'),
-             url('@{roboto-font-path}/Roboto-@{type}.ttf') format('truetype'),
-             url('@{roboto-font-path}/Roboto-@{type}.svg#Roboto') format('svg');
-        font-weight: @weight;
-        font-style: @style;
-    }
-
-    @font-face {
-        font-family: 'Roboto-@{type}';
-        src: url('@{roboto-font-path}/Roboto-@{type}.eot');
-        src: local('Roboto @{type}'),
-             local('Roboto-@{type}'),
-             url('@{roboto-font-path}/Roboto-@{type}.eot?#iefix') format('embedded-opentype'),
-             url('@{roboto-font-path}/Roboto-@{type}.woff2') format('woff2'),
-             url('@{roboto-font-path}/Roboto-@{type}.woff') format('woff'),
-             url('@{roboto-font-path}/Roboto-@{type}.ttf') format('truetype'),
-             url('@{roboto-font-path}/Roboto-@{type}.svg#Roboto') format('svg');
-    }
-}
-
-.roboto-font-pair(@type, @weight) {
-    .roboto-font('@{type}', @weight, normal);
-    .roboto-font('@{type}Italic', @weight, italic);
-}
-
-.roboto-font-pair('Regular', 400);

css/roboto-fontface-regular.scss

@@ -1,36 +1,3 @@
-$roboto-font-path: '../fonts' !default;
+@import "mixins";
 
-@mixin roboto-font($type, $weight, $style: normal) {
+@include roboto-font('Regular', 400, normal);
-    @font-face {
-        font-family: 'Roboto';
-        src: url('#{$roboto-font-path}/Roboto-#{$type}.eot');
-        src: local('Roboto #{$type}'),
-             local('Roboto-#{$type}'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.eot?#iefix') format('embedded-opentype'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.woff2') format('woff2'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.woff') format('woff'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.ttf') format('truetype'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.svg#Roboto') format('svg');
-        font-weight: $weight;
-        font-style: $style;
-    }
-
-    @font-face {
-        font-family: 'Roboto-#{$type}';
-        src: url('#{$roboto-font-path}/Roboto-#{$type}.eot');
-        src: local('Roboto #{$type}'),
-             local('Roboto-#{$type}'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.eot?#iefix') format('embedded-opentype'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.woff2') format('woff2'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.woff') format('woff'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.ttf') format('truetype'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.svg#Roboto') format('svg');
-    }
-}
-
-@mixin roboto-font-pair($type, $weight) {
-    @include roboto-font($type, $weight);
-    @include roboto-font(#{$type}Italic, $weight, italic);
-}
-
-@include roboto-font-pair('Regular', 400);

css/roboto-fontface-thin-italic.less

@@ -0,0 +1,3 @@
+@import "mixins";
+
+.roboto-font('ThinItalic', 100, italic);

css/roboto-fontface-thin-italic.scss

@@ -0,0 +1,3 @@
+@import "mixins";
+
+@include roboto-font('ThinItalic', 100, italic);

css/roboto-fontface-thin.less

@@ -1,36 +1,3 @@
-@roboto-font-path: '../fonts';
+@import "mixins";
 
-.roboto-font(@type, @weight, @style) {
+.roboto-font('Thin', 100, normal);
-    @font-face {
-        font-family: 'Roboto';
-        src: url('@{roboto-font-path}/Roboto-@{type}.eot');
-        src: local('Roboto @{type}'),
-             local('Roboto-@{type}'),
-             url('@{roboto-font-path}/Roboto-@{type}.eot?#iefix') format('embedded-opentype'),
-             url('@{roboto-font-path}/Roboto-@{type}.woff2') format('woff2'),
-             url('@{roboto-font-path}/Roboto-@{type}.woff') format('woff'),
-             url('@{roboto-font-path}/Roboto-@{type}.ttf') format('truetype'),
-             url('@{roboto-font-path}/Roboto-@{type}.svg#Roboto') format('svg');
-        font-weight: @weight;
-        font-style: @style;
-    }
-
-    @font-face {
-        font-family: 'Roboto-@{type}';
-        src: url('@{roboto-font-path}/Roboto-@{type}.eot');
-        src: local('Roboto @{type}'),
-             local('Roboto-@{type}'),
-             url('@{roboto-font-path}/Roboto-@{type}.eot?#iefix') format('embedded-opentype'),
-             url('@{roboto-font-path}/Roboto-@{type}.woff2') format('woff2'),
-             url('@{roboto-font-path}/Roboto-@{type}.woff') format('woff'),
-             url('@{roboto-font-path}/Roboto-@{type}.ttf') format('truetype'),
-             url('@{roboto-font-path}/Roboto-@{type}.svg#Roboto') format('svg');
-    }
-}
-
-.roboto-font-pair(@type, @weight) {
-    .roboto-font('@{type}', @weight, normal);
-    .roboto-font('@{type}Italic', @weight, italic);
-}
-
-.roboto-font-pair('Thin', 100);

css/roboto-fontface-thin.scss

@@ -1,36 +1,3 @@
-$roboto-font-path: '../fonts' !default;
+@import "mixins";
 
-@mixin roboto-font($type, $weight, $style: normal) {
+@include roboto-font('Thin', 100, normal);
-    @font-face {
-        font-family: 'Roboto';
-        src: url('#{$roboto-font-path}/Roboto-#{$type}.eot');
-        src: local('Roboto #{$type}'),
-             local('Roboto-#{$type}'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.eot?#iefix') format('embedded-opentype'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.woff2') format('woff2'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.woff') format('woff'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.ttf') format('truetype'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.svg#Roboto') format('svg');
-        font-weight: $weight;
-        font-style: $style;
-    }
-
-    @font-face {
-        font-family: 'Roboto-#{$type}';
-        src: url('#{$roboto-font-path}/Roboto-#{$type}.eot');
-        src: local('Roboto #{$type}'),
-             local('Roboto-#{$type}'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.eot?#iefix') format('embedded-opentype'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.woff2') format('woff2'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.woff') format('woff'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.ttf') format('truetype'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.svg#Roboto') format('svg');
-    }
-}
-
-@mixin roboto-font-pair($type, $weight) {
-    @include roboto-font($type, $weight);
-    @include roboto-font(#{$type}Italic, $weight, italic);
-}
-
-@include roboto-font-pair('Thin', 100);

css/roboto-fontface.less

@@ -1,37 +1,4 @@
-@roboto-font-path: '../fonts';
+@import "mixins";
-
-.roboto-font(@type, @weight, @style) {
-    @font-face {
-        font-family: 'Roboto';
-        src: url('@{roboto-font-path}/Roboto-@{type}.eot');
-        src: local('Roboto @{type}'),
-             local('Roboto-@{type}'),
-             url('@{roboto-font-path}/Roboto-@{type}.eot?#iefix') format('embedded-opentype'),
-             url('@{roboto-font-path}/Roboto-@{type}.woff2') format('woff2'),
-             url('@{roboto-font-path}/Roboto-@{type}.woff') format('woff'),
-             url('@{roboto-font-path}/Roboto-@{type}.ttf') format('truetype'),
-             url('@{roboto-font-path}/Roboto-@{type}.svg#Roboto') format('svg');
-        font-weight: @weight;
-        font-style: @style;
-    }
-
-    @font-face {
-        font-family: 'Roboto-@{type}';
-        src: url('@{roboto-font-path}/Roboto-@{type}.eot');
-        src: local('Roboto @{type}'),
-             local('Roboto-@{type}'),
-             url('@{roboto-font-path}/Roboto-@{type}.eot?#iefix') format('embedded-opentype'),
-             url('@{roboto-font-path}/Roboto-@{type}.woff2') format('woff2'),
-             url('@{roboto-font-path}/Roboto-@{type}.woff') format('woff'),
-             url('@{roboto-font-path}/Roboto-@{type}.ttf') format('truetype'),
-             url('@{roboto-font-path}/Roboto-@{type}.svg#Roboto') format('svg');
-    }
-}
-
-.roboto-font-pair(@type, @weight) {
-    .roboto-font('@{type}', @weight, normal);
-    .roboto-font('@{type}Italic', @weight, italic);
-}
 
 .roboto-font-pair('Thin', 100);
 .roboto-font-pair('Light', 300);

css/roboto-fontface.scss

@@ -1,37 +1,4 @@
-$roboto-font-path: '../fonts' !default;
+@import "mixins";
-
-@mixin roboto-font($type, $weight, $style: normal) {
-    @font-face {
-        font-family: 'Roboto';
-        src: url('#{$roboto-font-path}/Roboto-#{$type}.eot');
-        src: local('Roboto #{$type}'),
-             local('Roboto-#{$type}'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.eot?#iefix') format('embedded-opentype'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.woff2') format('woff2'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.woff') format('woff'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.ttf') format('truetype'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.svg#Roboto') format('svg');
-        font-weight: $weight;
-        font-style: $style;
-    }
-
-    @font-face {
-        font-family: 'Roboto-#{$type}';
-        src: url('#{$roboto-font-path}/Roboto-#{$type}.eot');
-        src: local('Roboto #{$type}'),
-             local('Roboto-#{$type}'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.eot?#iefix') format('embedded-opentype'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.woff2') format('woff2'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.woff') format('woff'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.ttf') format('truetype'),
-             url('#{$roboto-font-path}/Roboto-#{$type}.svg#Roboto') format('svg');
-    }
-}
-
-@mixin roboto-font-pair($type, $weight) {
-    @include roboto-font($type, $weight);
-    @include roboto-font(#{$type}Italic, $weight, italic);
-}
 
 @include roboto-font-pair('Thin', 100);
 @include roboto-font-pair('Light', 300);