Merge pull request #4 from sebastianmusial/feat/font-settings

feat(font): global settings for line-height, font-size and letter-spa…

Author: sebastianmusial

example/general/_global.scss

@@ -1,6 +1,7 @@
 // Global styles
 // ------------------------------------------
 body {
-  @extend %u-font-size--small;
+  // @extend %u-font-size--small;
+  @extend %u-font--small;
   @extend %u-padding--small;
 }

example/settings/_fonts.scss

@@ -6,6 +6,41 @@ $sscss-font-size: (
   'big':      ($mobile: 24px),
 );
 
+$sscss-font: (
+  'small': (
+    $mobile: (
+      'font-size': 7px,
+      'line-height': 7px,
+    ),
+    $tablet: (
+      'font-size': 14px,
+    ),
+    $desktop: (
+      'font-size': 28px,
+      'line-height': 28px,
+    ),
+  ),
+  'medium': (
+    $mobile:  (
+      'font-size': 16px,
+      'letter-spacing': 0.1em,
+      'line-height': 1.4,
+    ),
+    $tablet: (
+      'font-size': 18px,
+      'letter-spacing': 0.15em,
+      'line-height': 2.4,
+    ),
+  ),
+  'big': (
+    $mobile: (
+      'font-size': 25px,
+      'letter-spacing': 0.15em,
+      'line-height': 2.4,
+    ),
+  ),
+);
+
 // Optional global settings
 $sscss-font-interpolation: false;
 $sscss-font-as-class: false;

src/generator/_fonts.scss

@@ -27,3 +27,29 @@
   }
 
 }
+
+// ------------------------------------------
+// *  u-font--{name}
+// ------------------------------------------
+@if variable-exists(sscss-font) {
+  $interpolation: false;
+  @if variable-exists(sscss-font-interpolation) {
+    $interpolation: $sscss-font-interpolation;
+  }
+
+  $symbol: '%';
+  @if variable-exists(sscss-font-as-class) {
+    @if $sscss-font-as-class {
+      $symbol: '.';
+    }
+  }
+
+  @each $name, $value in $sscss-font {
+    #{$symbol}u-font--#{$name} {
+      @include scalable('letter-spacing', $value, false, false, true);
+      @include scalable('line-height', $value, false, false, true);
+      @include scalable('font-size', $value, $interpolation, false, true);
+    }
+  }
+
+}

src/mixins/_mixins.scss

@@ -30,12 +30,20 @@
   @return 2;
 }
 
-@mixin set-properties($properties, $map, $index, $sign) {
+@mixin set-properties($properties, $map, $index, $sign, $is-multiple: false) {
   $keys: map-keys($map);
 
   @each $property in $properties {
     $value: map-get($map, nth($keys, $index));
-    #{$property}: #{$sign}#{$value};
+    @if not($is-multiple) {
+      #{$property}: #{$sign}#{$value};
+    } @else  {
+      $single-value: map-get($value, $property);
+
+      @if $single-value {
+        #{$property}: #{$sign}#{$single-value};
+      }
+    }
   }
 }
 
@@ -63,40 +71,67 @@
 
 // Scalable
 // ------------------------------------------
-@mixin scalable($properties, $sscss-map, $global-interpolation: false, $is-negation: false) {
+@mixin scalable($properties, $sscss-map, $global-interpolation: false, $is-negation: false, $is-multiple: false) {
   $map: get-scalabe-map($sscss-map);
   $keys: map-keys($map);
   $length: length($keys);
   $sign: get-sign($is-negation);
   $is-interpolation: is-interpolation($sscss-map, $global-interpolation);
   $start-id: get-start-id($is-interpolation);
 
-  @include set-properties($properties, $map, 1, $sign);
+  @include set-properties($properties, $map, 1, $sign, $is-multiple);
 
   @if ($length >= $start-id + 1) {
     @for $i from $start-id through ($length - 1) {
       $breakpointFrom: nth($keys, $i);
       $breakpointTo: nth($keys, ($i + 1));
+
       $valueFrom: map-get($map, $breakpointFrom);
       $valueTo: map-get($map, $breakpointTo);
 
+      @if ($is-multiple) {
+        $valueFrom: map-get($map, $breakpointFrom);
+        $valueTo: map-get($map, $breakpointTo);
+      }
+
       @media (min-width: $breakpointFrom) {
         @if ($is-interpolation and $valueFrom != $valueTo) {
           @each $property in $properties {
-            $linear-map: ($breakpointFrom: $valueFrom, $breakpointTo: $valueTo);
-            #{$property}: linear-interpolation($linear-map, $is-negation);
+            @if not($is-multiple) {
+              $linear-map: ($breakpointFrom: $valueFrom, $breakpointTo: $valueTo);
+              #{$property}: linear-interpolation($linear-map, $is-negation);
+            } @else {
+              @if ($global-interpolation) {
+                $linear-map: ($breakpointFrom: map-get($valueFrom, $property), $breakpointTo: map-get($valueTo, $property));
+                #{$property}: linear-interpolation($linear-map, $is-negation);
+              } @else {
+                $single-value: map-get($valueFrom, $property);
+
+                @if $single-value {
+                  #{$property}: #{$sign}#{$single-value};
+                }
+              }
+            }
           }
         } @else {
           @each $property in $properties {
-            #{$property}: #{$sign}#{$valueFrom};
+            @if not($is-multiple) {
+              #{$property}: #{$sign}#{$valueFrom};
+            } @else {
+              $single-value: map-get($valueFrom, $property);
+
+              @if $single-value {
+                #{$property}: #{$sign}#{$single-value};
+              }
+            }
           }
         }
       }
     }
   }
 
   @media (min-width: nth($keys, $length)) {
-    @include set-properties($properties, $map, $length, $sign);
+    @include set-properties($properties, $map, $length, $sign, $is-multiple);
   }
 }