Introducing CSS var for rules

diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 81ea21617d0258d3f1b00e99e524c005ade84949..901f4681d981e63f2f8d6b008a0f74006ad4cdde 100644 (file)
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -66,11 +66,11 @@ body {
 // 1. Reset Firefox's gray color
 
 hr {
-  margin: $hr-margin-y 0;
-  color: $hr-color; // 1
+  margin: var(--#{$prefix}hr-margin, $hr-margin-y 0);
+  color: var(--#{$prefix}hr-color, $hr-color); // 1
   border: 0;
-  border-top: $hr-border-width solid $hr-border-color;
-  opacity: $hr-opacity;
+  border-top: var(--#{$prefix}hr-width, $hr-border-width) solid var(--#{$prefix}hr-border-color, $hr-border-color);
+  opacity: var(--#{$prefix}hr-opacity, $hr-opacity);
 }
 
 

diff --git a/scss/helpers/_vr.scss b/scss/helpers/_vr.scss
index b6f9d42cb13048d696f1d60fbece381934d242d8..c92e44e66da3062133d3d0767d568e91a113ff6d 100644 (file)
--- a/scss/helpers/_vr.scss
+++ b/scss/helpers/_vr.scss
@@ -1,8 +1,8 @@
 .vr {
   display: inline-block;
   align-self: stretch;
-  width: $vr-border-width;
-  min-height: 1em;
+  width: var(--#{$prefix}vr-width, $vr-border-width);
+  min-height: var(--#{$prefix}vr-height, 1em);
   background-color: currentcolor;
-  opacity: $hr-opacity;
+  opacity: var(--#{$prefix}vr-opacity, $hr-opacity);
 }