Mixin updates

uxinaz · May 12, 2014 · 262f014 · 262f014
1 parent 253a761
commit 262f014
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 31 deletions.
diff --git a/assets/sass/base/_mixins.scss b/assets/sass/base/_mixins.scss
@@ -1,16 +1,20 @@
 // SCSS mixins
 // ---------------------------------------
 
-// Breakpoints. Either set one to one of the breakpoint variables, or use a different number. Defaults to min-width, but both min-max and max-width is available too. Parts based on https://gist.github.com/timknight/03e6335b8816aa534cf7
+// Breakpoints. Either set one to one of the breakpoint variables, or use a custom value for minor breakpoints.
+// Defaults to min-width, but both min->max and max-width are available too.
+// Parts based on https://gist.github.com/timknight/03e6335b8816aa534cf7
 @mixin breakpoint($break: 0, $max: 0) {
   $value: type-of($break);
   @if $value == string {
+    // If using 'break-1', 'break-2' etc output the correct breakpoints from map.
     @if map-has-key($breakpoints, $break) {
       @media screen and (min-width: #{map-get($breakpoints, $break) / 16 * 1em} ) { @content; }
     } @else {
       @warn "#{$break} is not a set breakpoint variable";
     }
   } @else if $value == number {
+    // If using other numbers output value in ems either for min, min & max or max width breakpoints.
     $query: "all" !default;
     @if      $break != 0 and $max != 0 { $query: "(min-width: #{$break / 16 * 1em}) and (max-width: #{$max / 16 * 1em})"; }
     @else if $break != 0 and $max == 0 { $query: "(min-width: #{$break / 16 * 1em})"; }
@@ -21,17 +25,18 @@
   }
 }
 
-// Root font-size in %. Need to loop these based on number of breakpoints in map
-@mixin rootsize-0 { font-size: #{map-get($rootsizes, rootsize-0) / 16 * 100%}; }
-@mixin rootsize-1 { font-size: #{map-get($rootsizes, rootsize-1) / 16 * 100%}; }
-@mixin rootsize-2 { font-size: #{map-get($rootsizes, rootsize-2) / 16 * 100%}; }
-@mixin rootsize-3 { font-size: #{map-get($rootsizes, rootsize-3) / 16 * 100%}; }
-@mixin rootsize-4 { font-size: #{map-get($rootsizes, rootsize-4) / 16 * 100%}; }
-
-// Need to use @for to loop through by getting number of values in $rootsizes
-@mixin rootsize-all {
-  @each $value in $rootsizes {
-    @media screen and (min-width: #{map-get($breakpoints, break-#{value}) / 16 * 1em} ) { font-size: #{map-get($rootsizes, $value) / 16 * 100%}; }
+// Root font-size in %, outputted in correct breakpoints.
+@mixin rootsize {
+  $values: map-values($rootsizes);
+  $length: length($rootsizes);
+  $points: map-values($breakpoints);
+  @for $i from 1 through $length {
+    @if nth($points, $i) == 0 { font-size: nth($values, $i) / 16 * 100%; }
+    @else {
+      @media screen and (min-width: nth($points, $i) / 16 * 1em ) {
+        font-size: nth($values, $i) / 16 * 100%;
+      }
+    }
   }
 }
 
@@ -81,6 +86,14 @@
   }
 }
 
+@mixin fontsize($fontsize, $breakpoint: 0) {
+  @if type-of($fontsize) == number {
+    font-size: #{$fontsize / map-get($rootsizes, rootsize-0)}rem;
+  } @else if map-has-key($map, $fontsize){
+    font-size: #{map-fetch($modular-scale, scale-0 $fontsize) / map-get($rootsizes, rootsize-0)}rem;
+  }
+}
+
 
 // Extending Sass maps functionality to get into nested maps. https://gist.github.com/jlong/8760275
 @function map-fetch($map, $keys) {
@@ -98,6 +111,12 @@
   }
 }
 
+@function has-in-scale($scale) {
+  $test: map-get($modular-scale, $scale);
+  $output: map-keys($test);
+  @return $output;
+}
+
 // Clearfix.
 @mixin clearfix {
   &:before, &:after{

diff --git a/assets/sass/base/_typography.scss b/assets/sass/base/_typography.scss
@@ -5,19 +5,7 @@
 html {
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
-  @include rootsize-0;
-  @include breakpoint(break-1) {
-    @include rootsize-1;
-  }
-  @include breakpoint(break-2) {
-    @include rootsize-2;
-  }
-  @include breakpoint(break-3) {
-    @include rootsize-3;
-  }
-  @include breakpoint(break-4) {
-    @include rootsize-4;
-  }
+  @include rootsize;
 }
 
 // Site-wide base styles.
@@ -28,16 +16,16 @@ body {
   font-weight: 400;
   @include fontsize-0(zeta);
   @include breakpoint(break-1) {
-    @include fontsize-1(17);
+    @include fontsize-1(zeta);
   }
   @include breakpoint(break-2) {
-    @include fontsize-2(18);
+    @include fontsize-2(zeta);
   }
   @include breakpoint(break-3) {
-    @include fontsize-3(20);
+    @include fontsize-3(zeta);
   }
   @include breakpoint(break-4) {
-    @include fontsize-4(22);
+    @include fontsize-4(zeta);
   }
 }
 

diff --git a/assets/sass/base/_variables.scss b/assets/sass/base/_variables.scss
@@ -1,7 +1,8 @@
 // SCSS variables
 // ---------------------------------------
 
-// Breakpoint sizes in ems. Add more values here to add more breakpoints. Change names if you prefer, it wont break the mixin.
+// Breakpoint sizes in ems. Add more values here to add more breakpoints.
+// Change names if you prefer, it wont break the mixin as long as they are strings not just numbers.
 // Note: not relative to root font-size.
 $breakpoints: (
   break-0: 0,     // 0px       Mobile first
@@ -32,7 +33,7 @@ $maxwidth-4: #{750 / map-get($rootsizes, rootsize-4)}rem; // 720px wide
 $serif: "edita", Georgia, Times, serif;
 $sans-serif: "ratio", Helvetica, Arial, sans-serif;
 
-// Text colours. British English, there is totally a 'u' in there.
+// Text colours. British English.
 $headingColour: #2E2E2E;
 $bodyColour: #494949;
 $linkColour: #D52836;