From d7da99f87b8b22bd7e907f2eac6fc220fb71ab33 Mon Sep 17 00:00:00 2001
From: Alex Windett <alex@bigfish.co.uk>
Date: Tue, 25 Oct 2016 17:22:19 +0100
Subject: [PATCH] Grid - using varibale in for loop when creating grid classes

---
 ui/package.json                    | 1 +
 ui/src/components/column/style.css | 8 ++++----
 ui/webpack/base.js                 | 1 +
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/ui/package.json b/ui/package.json
index a3a0ad6e..5588634c 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -43,6 +43,7 @@
     "lodash.get": "^4.4.2",
     "nyc": "^8.3.1",
     "param-case": "^2.1.0",
+    "postcss-at-rules-variables": "0.0.25",
     "postcss-cssnext": "^2.8.0",
     "postcss-for": "^2.1.1",
     "postcss-loader": "^1.0.0",
diff --git a/ui/src/components/column/style.css b/ui/src/components/column/style.css
index 8aa3f8ad..eb2aeb3f 100644
--- a/ui/src/components/column/style.css
+++ b/ui/src/components/column/style.css
@@ -3,12 +3,12 @@
  * https://github.com/kristoferjoseph/flexboxgrid/blob/master/dist/flexboxgrid.css
  */
 
-@value half-gutter-width, grid-columns from "../../constants/sizes.css";
+@value half-gutter-width from "../../constants/sizes.css";
 @value sm-viewport, md-viewport, lg-viewport from "../../constants/breakpoints.css";
 
 :root {
   --half-gutter-width: half-gutter-width;
-  --grid-columns: 12;
+  --grid-columns: 12; /* Cannot import values and use them within the loop */
 }
 
 @define-mixin viewport $size {
@@ -18,14 +18,14 @@
     max-width: 100%;
   }
 
-  @for $i from 1 to 12 {
+  @for $i from 1 to var(--grid-columns) {
     &.$(size)-$i {
       flex-basis: calc( ($i / var(--grid-columns)) * 100%);
       max-width: calc( ($i / var(--grid-columns)) * 100%);
     }
   }
 
-  @for $i from 0 to 12 {
+  @for $i from 0 to var(--grid-columns) {
     &.$(size)-offset-$i {
       margin-left: calc( ($i / var(--grid-columns)) * 100%);
     }
diff --git a/ui/webpack/base.js b/ui/webpack/base.js
index 73932904..c93d4c83 100644
--- a/ui/webpack/base.js
+++ b/ui/webpack/base.js
@@ -12,6 +12,7 @@ const plugins = {
     options: {
       postcss: {
         plugins: [
+          require('postcss-at-rules-variables')(),
           require('postcss-modules-values'),
           require('postcss-mixins')(),
           require('postcss-for'),