From 6cfa02606a5ee81dc63702f23fe36c42ea76b27a Mon Sep 17 00:00:00 2001
From: Jonathan Reinink <jonathan@reinink.ca>
Date: Tue, 1 Aug 2017 15:03:12 -0400
Subject: [PATCH] Add constrain variables.

---
 src/utilities/constrain.less | 28 +++++++++++++++++++---------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/utilities/constrain.less b/src/utilities/constrain.less
index 6a19b9d94..b6874ceba 100644
--- a/src/utilities/constrain.less
+++ b/src/utilities/constrain.less
@@ -1,12 +1,22 @@
-.constrain-xs { max-width: 20rem; flex-basis: 20rem; }
-.constrain-sm { max-width: 30rem; flex-basis: 30rem; }
-.constrain-md { max-width: 40rem; flex-basis: 40rem; }
-.constrain-lg { max-width: 50rem; flex-basis: 50rem; }
-.constrain-xl { max-width: 60rem; flex-basis: 60rem; }
-.constrain-2xl { max-width: 70rem; flex-basis: 70rem; }
-.constrain-3xl { max-width: 80rem; flex-basis: 80rem; }
-.constrain-4xl { max-width: 90rem; flex-basis: 90rem; }
-.constrain-5xl { max-width: 100rem; flex-basis: 100rem; }
+@constrain-xs: 20rem;
+@constrain-sm: 30rem;
+@constrain-md: 40rem;
+@constrain-lg: 50rem;
+@constrain-xl: 60rem;
+@constrain-2xl: 70rem;
+@constrain-3xl: 80rem;
+@constrain-4xl: 90rem;
+@constrain-5xl: 100rem;
+
+.constrain-xs { max-width: @constrain-xs; flex-basis: @constrain-xs; }
+.constrain-sm { max-width: @constrain-sm; flex-basis: @constrain-sm; }
+.constrain-md { max-width: @constrain-md; flex-basis: @constrain-md; }
+.constrain-lg { max-width: @constrain-lg; flex-basis: @constrain-lg; }
+.constrain-xl { max-width: @constrain-xl; flex-basis: @constrain-xl; }
+.constrain-2xl { max-width: @constrain-2xl; flex-basis: @constrain-2xl; }
+.constrain-3xl { max-width: @constrain-3xl; flex-basis: @constrain-3xl; }
+.constrain-4xl { max-width: @constrain-4xl; flex-basis: @constrain-4xl; }
+.constrain-5xl { max-width: @constrain-5xl; flex-basis: @constrain-5xl; }
 
 .responsive({
   &constrain-xs { .constrain-xs; }