add blog

packages/web/assets/spacing.scss

@@ -0,0 +1,51 @@
+$sizeUnit: rem;
+$marginKey: "m";
+$paddingKey: "p";
+$separator: "-";
+$sizes: (("0", 0), ("xxs", 0.125), ("xs", 0.25), ("sm", 0.5), ("md", 1), ("lg", 2), ("xl", 4), ("xxl", 8));
+$positions: (("t", "top"), ("r", "right"), ("b", "bottom"), ("l", "left"), ("x", "x"), ("y", "y"), ("a", "around"));
+
+@function sizeValue($key, $value) {
+  @return if($key == "0", 0, $value + $sizeUnit);
+}
+
+@each $size in $sizes {
+  $sizeKey: nth($size, 1);
+  $sizeValue: nth($size, 2);
+  .#{$marginKey}#{$separator}#{$sizeKey} {
+    margin: sizeValue($sizeKey, $sizeValue);
+  }
+  .#{$paddingKey}#{$separator}#{$sizeKey} {
+    padding: sizeValue($sizeKey, $sizeValue);
+  }
+  @each $position in $positions {
+    $posKey: nth($position, 1);
+    $posValue: nth($position, 2);
+    .#{$marginKey}#{$posKey}#{$separator}#{$sizeKey} {
+      @if $posValue == "x" {
+        margin-left: sizeValue($sizeKey, $sizeValue);
+        margin-right: sizeValue($sizeKey, $sizeValue);
+      } @else if $posValue == "y" {
+        margin-top: sizeValue($sizeKey, $sizeValue);
+        margin-bottom: sizeValue($sizeKey, $sizeValue);
+      } @else if $posValue == "around" {
+        margin: sizeValue($sizeKey, $sizeValue);
+      } @else {
+        margin-#{$posValue}: sizeValue($sizeKey, $sizeValue);
+      }
+    }
+    .#{$paddingKey}#{$posKey}#{$separator}#{$sizeKey} {
+      @if $posValue == "x" {
+        padding-left: sizeValue($sizeKey, $sizeValue);
+        padding-right: sizeValue($sizeKey, $sizeValue);
+      } @else if $posValue == "y" {
+        padding-top: sizeValue($sizeKey, $sizeValue);
+        padding-bottom: sizeValue($sizeKey, $sizeValue);
+      } @else if $posValue == "around" {
+        padding: sizeValue($sizeKey, $sizeValue);
+      } @else {
+        padding-#{$posValue}: sizeValue($sizeKey, $sizeValue);
+      }
+    }
+  }
+}