Merge branch 'allow-shorthand-margin-padding-values'

Author: robbiemanson

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fa-css-utilities",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "description": "CSS utilities for using and managing FreeAgent design properties consistently",
   "repository": {
     "type": "git",

utilities/_margin.scss

@@ -9,12 +9,30 @@
 /**
  * Example usage:
  * `@include margin(default);`
+ * `@include margin(default large);`
+ * `@include padding(default large x-large xx-small);`
+ * `@include margin(x-large small, !important);`
  * `@include margin-left(large);`
  * `@include margin-bottom(xx-large, !important);`
  */
 
-@mixin margin($value, $important: null) {
-  margin: map-get($spacing-values, $value) $important;
+/**
+ * This mixin allows us to use shorthand values for the `margin` property.
+ *
+ * The mixin runs through our spacing values, given in the first argument, then
+ * creates another list of the mappings of those spacing values, which it then
+ * feeds to the `margin` property.
+ */
+
+@mixin margin($values, $important: null) {
+  $valueList: ();
+
+  @for $i from 1 through length($values) {
+    $value: map-get($spacing-values, nth($values, $i));
+    $valueList: append($valueList, $value, space);
+  }
+
+  margin: $valueList $important;
 }
 
 @mixin margin-bottom($value, $important: null) {

utilities/_padding.scss

@@ -9,12 +9,30 @@
 /**
  * Example usage:
  * `@include padding(default);`
+ * `@include padding(default large);`
+ * `@include padding(default large x-large xx-small);`
+ * `@include padding(x-large small, !important);`
  * `@include padding-left(large);`
  * `@include padding-bottom(xx-large, !important);`
  */
 
-@mixin padding($value, $important: null) {
-  padding: map-get($spacing-values, $value) $important;
+/**
+ * This mixin allows us to use shorthand values for the `padding` property.
+ *
+ * The mixin runs through our spacing values, given in the first argument, then
+ * creates another list of the mappings of those spacing values, which it then
+ * feeds to the `padding` property.
+ */
+
+@mixin padding($values, $important: null) {
+  $valueList: ();
+
+  @for $i from 1 through length($values) {
+    $value: map-get($spacing-values, nth($values, $i));
+    $valueList: append($valueList, $value, space);
+  }
+
+  padding: $valueList $important;
 }
 
 @mixin padding-bottom($value, $important: null) {