use var to create custom property name

Author: haschek

src/configuration/_customproperties.scss

@@ -5,34 +5,34 @@
  */
 
 :root {
-    --eccgui-size-typo-caption: #{$eccgui-size-typo-caption};
-    --eccgui-size-typo-caption-lineheight: #{$eccgui-size-typo-caption-lineheight};
-    --eccgui-size-typo-text: #{$eccgui-size-typo-text};
-    --eccgui-size-typo-text-lineheight: #{$eccgui-size-typo-text-lineheight};
-    --eccgui-size-typo-subtitle: #{$eccgui-size-typo-subtitle};
-    --eccgui-size-typo-subtitle-lineheight: #{$eccgui-size-typo-subtitle-lineheight};
-    --eccgui-size-typo-title: #{$eccgui-size-typo-title};
-    --eccgui-size-typo-title-lineheight: #{$eccgui-size-typo-title-lineheight};
-    --eccgui-size-typo-headline: #{$eccgui-size-typo-headline};
-    --eccgui-size-typo-headline-lineheight: #{$eccgui-size-typo-headline-lineheight};
-    --eccgui-size-typo-display-1: #{$eccgui-size-typo-display-1};
-    --eccgui-size-typo-display-1-lineheight: #{$eccgui-size-typo-display-1-lineheight};
-    --eccgui-size-typo-display-2: #{$eccgui-size-typo-display-2};
-    --eccgui-size-typo-display-2-lineheight: #{$eccgui-size-typo-display-2-lineheight};
-    --eccgui-size-typo-display-3: #{$eccgui-size-typo-display-3};
-    --eccgui-size-typo-display-3-lineheight: #{$eccgui-size-typo-display-3-lineheight};
-    --eccgui-font-weight-light: #{$eccgui-font-weight-light};
-    --eccgui-font-weight-regular: #{$eccgui-font-weight-regular};
-    --eccgui-font-weight-bold: #{$eccgui-font-weight-bold};
-    --eccgui-font-spacing-condensed: #{$eccgui-font-spacing-condensed};
-    --eccgui-font-spacing-regular: #{$eccgui-font-spacing-regular};
-    --eccgui-font-spacing-wide: #{$eccgui-font-spacing-wide};
-    --eccgui-size-block-whitespace: #{$eccgui-size-block-whitespace};
-    --eccgui-size-inline-whitespace: #{$eccgui-size-inline-whitespace};
-    --eccgui-opacity-regular: #{$eccgui-opacity-regular};
-    --eccgui-opacity-narrow: #{$eccgui-opacity-narrow};
-    --eccgui-opacity-muted: #{$eccgui-opacity-muted};
-    --eccgui-opacity-disabled: #{$eccgui-opacity-disabled};
-    --eccgui-opacity-ghostly: #{$eccgui-opacity-ghostly};
-    --eccgui-opacity-invisible: #{$eccgui-opacity-invisible};
+    --#{$eccgui}-size-typo-caption: #{$eccgui-size-typo-caption};
+    --#{$eccgui}-size-typo-caption-lineheight: #{$eccgui-size-typo-caption-lineheight};
+    --#{$eccgui}-size-typo-text: #{$eccgui-size-typo-text};
+    --#{$eccgui}-size-typo-text-lineheight: #{$eccgui-size-typo-text-lineheight};
+    --#{$eccgui}-size-typo-subtitle: #{$eccgui-size-typo-subtitle};
+    --#{$eccgui}-size-typo-subtitle-lineheight: #{$eccgui-size-typo-subtitle-lineheight};
+    --#{$eccgui}-size-typo-title: #{$eccgui-size-typo-title};
+    --#{$eccgui}-size-typo-title-lineheight: #{$eccgui-size-typo-title-lineheight};
+    --#{$eccgui}-size-typo-headline: #{$eccgui-size-typo-headline};
+    --#{$eccgui}-size-typo-headline-lineheight: #{$eccgui-size-typo-headline-lineheight};
+    --#{$eccgui}-size-typo-display-1: #{$eccgui-size-typo-display-1};
+    --#{$eccgui}-size-typo-display-1-lineheight: #{$eccgui-size-typo-display-1-lineheight};
+    --#{$eccgui}-size-typo-display-2: #{$eccgui-size-typo-display-2};
+    --#{$eccgui}-size-typo-display-2-lineheight: #{$eccgui-size-typo-display-2-lineheight};
+    --#{$eccgui}-size-typo-display-3: #{$eccgui-size-typo-display-3};
+    --#{$eccgui}-size-typo-display-3-lineheight: #{$eccgui-size-typo-display-3-lineheight};
+    --#{$eccgui}-font-weight-light: #{$eccgui-font-weight-light};
+    --#{$eccgui}-font-weight-regular: #{$eccgui-font-weight-regular};
+    --#{$eccgui}-font-weight-bold: #{$eccgui-font-weight-bold};
+    --#{$eccgui}-font-spacing-condensed: #{$eccgui-font-spacing-condensed};
+    --#{$eccgui}-font-spacing-regular: #{$eccgui-font-spacing-regular};
+    --#{$eccgui}-font-spacing-wide: #{$eccgui-font-spacing-wide};
+    --#{$eccgui}-size-block-whitespace: #{$eccgui-size-block-whitespace};
+    --#{$eccgui}-size-inline-whitespace: #{$eccgui-size-inline-whitespace};
+    --#{$eccgui}-opacity-regular: #{$eccgui-opacity-regular};
+    --#{$eccgui}-opacity-narrow: #{$eccgui-opacity-narrow};
+    --#{$eccgui}-opacity-muted: #{$eccgui-opacity-muted};
+    --#{$eccgui}-opacity-disabled: #{$eccgui-opacity-disabled};
+    --#{$eccgui}-opacity-ghostly: #{$eccgui-opacity-ghostly};
+    --#{$eccgui}-opacity-invisible: #{$eccgui-opacity-invisible};
 }