Add functions to register and assign CSS variables

sass/components/media.sass

@@ -1,15 +1,19 @@
-$media-border-color: bulmaRgba($border, 0.5) !default
+$media-border-color: rgba(var(--border-rgb, #{bulmaToRGB($grey-lighter)}), 0.5) !default
 $media-spacing: 1rem
 $media-spacing-large: 1.5rem
 
 .media
+  --media-border-color: #{$media-border-color}
+  --media-spacing: #{$media-spacing}
+  --media-spacing-large: #{$media-spacing-large}
+
   align-items: flex-start
   display: flex
   text-align: inherit
   .content:not(:last-child)
     margin-bottom: 0.75rem
   .media
-    border-top: 1px solid $media-border-color
+    border-top: 1px solid var(--media-border-color)
     display: flex
     padding-top: 0.75rem
     .content:not(:last-child),
@@ -20,14 +24,13 @@ $media-spacing-large: 1.5rem
       & + .media
         margin-top: 0.5rem
   & + .media
-    border-top: 1px solid $media-border-color
-    margin-top: $media-spacing
-    padding-top: $media-spacing
+    border-top: 1px solid var(--media-border-color)
+    margin-top: var(--media-spacing)
+    padding-top: var(--media-spacing)
   // Sizes
   &.is-large
     & + .media
-      margin-top: $media-spacing-large
-      padding-top: $media-spacing-large
+      --media-spacing: var(--media-spacing-large)
 
 .media-left,
 .media-right
@@ -36,10 +39,10 @@ $media-spacing-large: 1.5rem
   flex-shrink: 0
 
 .media-left
-  +ltr-property("margin", $media-spacing)
+  +ltr-property("margin", var(--media-spacing))
 
 .media-right
-  +ltr-property("margin", $media-spacing, false)
+  +ltr-property("margin", var(--media-spacing), false)
 
 .media-content
   flex-basis: auto