Use variables for the width/height classes

diff --git a/scss/_variables.scss b/scss/_variables.scss
index d7f5f4c68a993cbc14586e40ba10aef9f79fe0cf..f1132999a0cbdc984d790241675954dd1b41e034 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -169,6 +169,13 @@ $spacers: (
 ) !default;
 $border-width: 1px !default;
 
+// This variable affects the `.h-*` and `.w-*` classes.
+$sizes: (
+  25: 25%,
+  50: 50%,
+  75: 75%,
+  100: 100%
+) !default;
 
 // Body
 //

diff --git a/scss/utilities/_spacing.scss b/scss/utilities/_spacing.scss
index c1b3747b69fe01c033644db48f546fe1efae5297..208212d5219de9bfa589c44c88c468aad00bb70f 100644 (file)
--- a/scss/utilities/_spacing.scss
+++ b/scss/utilities/_spacing.scss
@@ -1,14 +1,10 @@
 // Width and height
 
-.w-25 { width: 25% !important; }
-.w-50 { width: 50% !important; }
-.w-75 { width: 75% !important; }
-.w-100 { width: 100% !important; }
-
-.h-25 { height: 25% !important; }
-.h-50 { height: 50% !important; }
-.h-75 { height: 75% !important; }
-.h-100 { height: 100% !important; }
+@each $prop, $abbrev in (width: w, height: h) {
+  @each $size, $length in $sizes {
+    .#{$abbrev}-#{$size} { #{$prop}: $length !important; }
+  }
+}
 
 .mw-100 { max-width: 100% !important; }
 .mh-100 { max-height: 100% !important; }