Add examples of spacing multipliers

Author: jfmdev

demo.html

@@ -48,6 +48,14 @@ <h2>Spacing</h2>
     <div class="pure-py-3 pure-bg-blue pure-bg-opacity-20 pure-border-black pure-bd-opacity-40">
       <div class="pure-bg-white">pure-py-3</div>
     </div>
+    <br>
+    <div class="pure-p-2 pure-spacing-2x pure-bg-blue pure-bg-opacity-20 pure-border-black pure-bd-opacity-40">
+      <div class="pure-bg-white">pure-p-2 pure-spacing-2x</div>
+    </div>
+    <br>
+    <div class="pure-pl-2 pure-spacing-3x pure-bg-blue pure-bg-opacity-20 pure-border-black pure-bd-opacity-40">
+      <div class="pure-bg-white">pure-pl-2 pure-spacing-3x</div>
+    </div>
 
     <br>
     <br>
@@ -87,6 +95,14 @@ <h2>Spacing</h2>
     <div class="pure-bg-green pure-bg-opacity-20 pure-border-black pure-bd-opacity-40">
       <div class="pure-my-3 pure-bg-white">pure-my-3</div>
     </div>
+    <br>
+    <div class="pure-bg-green pure-bg-opacity-20 pure-border-black pure-bd-opacity-40">
+      <div class="pure-m-2 pure-spacing-2x pure-bg-white">pure-m-2 pure-spacing-2x</div>
+    </div>
+    <br>
+    <div class="pure-bg-green pure-bg-opacity-20 pure-border-black pure-bd-opacity-40">
+      <div class="pure-ml-2 pure-spacing-3x pure-bg-white">pure-ml-2 pure-spacing-3x</div>
+    </div>
 
   </body>
 </html>

src/base.scss

@@ -1,7 +1,6 @@
 $pure-opacities: 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90;
 $pure-spacing-unit: 0.25;
 
-
 :root {
   --pureBlue: #0078e7;
   --pureBlueRgb: 0, 120, 231;
@@ -11,15 +10,28 @@ $pure-spacing-unit: 0.25;
   --pureGreenRgb: 120, 231, 0;
   --pureWhite: #ffffff;
   --pureWhiteRgb: 255, 255, 255;
+}
 
-  --pureSpacingUnit: #{$pure-spacing-unit}rem;
-
-  --pureTxtOpacity: 1;
-  --pureBdOpacity: 1;
+@property --pureBdOpacity {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 1;
 }
 
 @property --pureBgOpacity {
   syntax: "<number>";
   inherits: false;
   initial-value: 1;
-}
+}
+
+@property --pureSpacingUnit {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: #{$pure-spacing-unit}rem;
+}
+
+@property --pureTxtOpacity {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 1;
+}