Use var() notation

docs/_sass/main.sass

@@ -5,7 +5,7 @@
 .bd-figure
   +block
   align-items: center
-  border: 2px solid $scheme-main-ter
+  border: 2px solid var(--#{$prefix}-scheme-main-ter)
   border-radius: $radius
   display: flex
   flex-direction: column
@@ -14,8 +14,8 @@
     margin: 1em
   figcaption
     align-self: stretch
-    background-color: $scheme-main-ter
-    color: $text-light
+    background-color: var(--#{$prefix}-scheme-main-ter)
+    color: var(--#{$prefix}-text-light)
     font-size: $size-small
     padding: 1em
 
@@ -33,7 +33,7 @@
 
 .bd-prev-next
   align-items: flex-start
-  color: $border-hover
+  color: var(--#{$prefix}-border-hover)
   display: none
   flex-grow: 0
   flex-shrink: 0
@@ -45,7 +45,7 @@
     width: 1.5rem
   a
     &:hover
-      background-color: $background
+      background-color: var(--#{$prefix}-background)
 
 .bd-prev-next-bis
   border-top: 2px solid $background
@@ -64,7 +64,7 @@
 .bd-header
   margin-bottom: $main-spacing
   .subtitle
-    color: $text-light
+    color: var(--#{$prefix}-text-light)
     strong
       color: currentColor
   #meta
@@ -87,12 +87,12 @@
       overflow: visible
       ul,
       a
-        border-bottom-color: $scheme-main-ter
+        border-bottom-color: var(--#{$prefix}-scheme-main-ter)
         border-bottom-width: 2px
       a
         margin-bottom: -2px
       li:not(.is-active) a:hover
-          border-bottom-color: $border
+          border-bottom-color: var(--#{$prefix}-border)
       ul
         flex-wrap: wrap
         max-width: 100%
@@ -109,7 +109,7 @@
 
 .bd-side,
 .bd-side-background
-  background-color: $scheme-main-bis
+  background-color: var(--#{$prefix}-scheme-main-bis)
 
 .bd-side
   position: relative
@@ -128,19 +128,19 @@
       margin-bottom: 0.5em
     &.is-past
       a
-        color: $border-hover
+        color: var(--#{$prefix}-border-hover)
     &.is-current
       a
-        color: $link
+        color: var(--#{$prefix}-link)
   a
-    color: $text-light
+    color: var(--#{$prefix}-text-light)
     &:hover
-      color: $link
+      color: var(--#{$prefix}-link)
 
 .bd-category
   a
     &:hover
-      color: $link
+      color: var(--#{$prefix}-link)
   &:not(:last-child)
     margin-bottom: 0.5rem
   &.is-active
@@ -156,7 +156,7 @@
 .bd-category-toggle
   +overlay
   align-items: center
-  color: $border-hover
+  color: var(--#{$prefix}-border-hover)
   display: flex
   justify-content: flex-end
   .icon
@@ -174,10 +174,10 @@
   vertical-align: text-bottom
 
 .bd-category-name
-  color: $text-strong
+  color: var(--#{$prefix}-text-strong)
   position: relative
   &.is-active
-    color: $link
+    color: var(--#{$prefix}-link)
   .bd-mini-tag
     margin-left: 0.5em
 
@@ -201,7 +201,7 @@
       top: 0
 
 .bd-anchors-title
-  color: $border-hover
+  color: var(--#{$prefix}-border-hover)
   font-size: 0.875rem
   font-weight: $weight-semibold
   margin-bottom: 0.5rem
@@ -212,7 +212,7 @@
     &:last-child
       margin-top: 1em
   a
-    color: $text-strong
+    color: var(--#{$prefix}-text-strong)
 
 +touch
   .bd-lead,
@@ -229,7 +229,7 @@
   .bd-duo
     display: flex
   .bd-lead
-    background-color: $scheme-main
+    background-color: var(--#{$prefix}-scheme-main)
     overflow: hidden
     flex-grow: 1
     flex-shrink: 1