Implementing a simple version of the native sass percentage function for the grid...

diff --git a/sass/grid/columns.sass b/sass/grid/columns.sass
index 90aeee82a405abf25544d53e8c093197bcd62fb1..0b5d4de9d3652161c2d700bff00bd07c2687ea85 100644 (file)
--- a/sass/grid/columns.sass
+++ b/sass/grid/columns.sass
@@ -59,9 +59,9 @@ $column-gap: 0.75rem !default
   @for $i from 1 through 12
     .columns.is-mobile > &.is-#{$i}
       flex: none
-      width: ($i / 12) * 100%
+      width: percentage($i / 12)
     .columns.is-mobile > &.is-offset-#{$i}
-      margin-left: ($i / 12) * 100%
+      margin-left: percentage($i / 12)
   +mobile
     &.is-narrow-mobile
       flex: none
@@ -116,9 +116,9 @@ $column-gap: 0.75rem !default
     @for $i from 1 through 12
       &.is-#{$i}-mobile
         flex: none
-        width: ($i / 12) * 100%
+        width: percentage($i / 12)
       &.is-offset-#{$i}-mobile
-        margin-left: ($i / 12) * 100%
+        margin-left: percentage($i / 12)
   +tablet
     &.is-narrow,
     &.is-narrow-tablet
@@ -194,10 +194,10 @@ $column-gap: 0.75rem !default
       &.is-#{$i},
       &.is-#{$i}-tablet
         flex: none
-        width: ($i / 12) * 100%
+        width: percentage($i / 12)
       &.is-offset-#{$i},
       &.is-offset-#{$i}-tablet
-        margin-left: ($i / 12) * 100%
+        margin-left: percentage($i / 12)
   +touch
     &.is-narrow-touch
       flex: none
@@ -252,9 +252,9 @@ $column-gap: 0.75rem !default
     @for $i from 1 through 12
       &.is-#{$i}-touch
         flex: none
-        width: ($i / 12) * 100%
+        width: percentage($i / 12)
       &.is-offset-#{$i}-touch
-        margin-left: ($i / 12) * 100%
+        margin-left: percentage($i / 12)
   +desktop
     &.is-narrow-desktop
       flex: none
@@ -309,9 +309,9 @@ $column-gap: 0.75rem !default
     @for $i from 1 through 12
       &.is-#{$i}-desktop
         flex: none
-        width: ($i / 12) * 100%
+        width: percentage($i / 12)
       &.is-offset-#{$i}-desktop
-        margin-left: ($i / 12) * 100%
+        margin-left: percentage($i / 12)
   +widescreen
     &.is-narrow-widescreen
       flex: none
@@ -366,9 +366,9 @@ $column-gap: 0.75rem !default
     @for $i from 1 through 12
       &.is-#{$i}-widescreen
         flex: none
-        width: ($i / 12) * 100%
+        width: percentage($i / 12)
       &.is-offset-#{$i}-widescreen
-        margin-left: ($i / 12) * 100%
+        margin-left: percentage($i / 12)
   +fullhd
     &.is-narrow-fullhd
       flex: none
@@ -423,9 +423,9 @@ $column-gap: 0.75rem !default
     @for $i from 1 through 12
       &.is-#{$i}-fullhd
         flex: none
-        width: ($i / 12) * 100%
+        width: percentage($i / 12)
       &.is-offset-#{$i}-fullhd
-        margin-left: ($i / 12) * 100%
+        margin-left: percentage($i / 12)
 
 .columns
   margin-left: (-$column-gap)