Use Sass variable and Sass mixin to generate is-variable rules

Instead of depending on CSS variable browser support, use a Sass variable and a Sass mixin to generate regular CSS for the is-variable class. This should increase browser compatibility as well as fix jgthms#1190 where warnings are emitted when using a CSS variable.
ADTC · Nov 27, 2017 · e3e9008 · e3e9008
1 parent 5801d57
commit e3e9008
Showing 1 changed file with 9 additions and 7 deletions.
diff --git a/sass/grid/columns.sass b/sass/grid/columns.sass
@@ -464,13 +464,15 @@ $column-gap: 0.75rem !default
     &.is-desktop
       display: flex
 
-.columns.is-variable
-  --columnGap: 0.75rem
-  margin-left: calc(-1 * var(--columnGap))
-  margin-right: calc(-1 * var(--columnGap))
+@mixin columns-is-variable($columnGap: 0.75rem)
+  margin-left: #{-1 * $columnGap}
+  margin-right: #{-1 * $columnGap}
   .column
-    padding-left: var(--columnGap)
-    padding-right: var(--columnGap)
+    padding-left: $columnGap
+    padding-right: $columnGap
+
+.columns.is-variable
+  @include columns-is-variable
   @for $i from 0 through 8
     &.is-#{$i}
-      --columnGap: #{$i * 0.25rem}
+      @include columns-is-variable($i * 0.25rem)