diff --git a/sources/components/custom-styles/template-cs-blog-article.scss b/sources/components/custom-styles/template-cs-blog-article.scss
index b06c2f7..3192321 100644
--- a/sources/components/custom-styles/template-cs-blog-article.scss
+++ b/sources/components/custom-styles/template-cs-blog-article.scss
@@ -18,7 +18,7 @@
 // =============================================================================
 :root {
   // scss-lint:disable Comment, Indentation
-  
+
   // BLOG ARTICLE CONTENT!
 
   /* VoogStyle
@@ -31,7 +31,7 @@
      "unit": "px",
      "scope": "global"
   */
-  --blog-article-margin: 70px;
+  #{--blog-article-margin}: 70px;
 
   /* VoogStyle
     "pathI18n": ["content", "title"],
@@ -43,7 +43,7 @@
     "scope": "global",
     "featured": true
   */
-  --content-title-font-size: 46px;
+  #{--content-title-font-size}: 46px;
 
   /* VoogStyle
      "pathI18n": ["content", "title"],
@@ -55,7 +55,7 @@
      "unit": "em",
      "scope": "global"
   */
-  --content-title-line-height: 1em;
+  #{--content-title-line-height}: 1em;
 
   /* VoogStyle
     "pathI18n": ["content", "title"],
@@ -69,7 +69,7 @@
     "icon": "bold",
     "scope": "global"
   */
-  --content-title-font-weight: 400;
+  #{--content-title-font-weight}: 400;
 
   /* VoogStyle
     "pathI18n": ["content", "title"],
@@ -83,7 +83,7 @@
     "icon": "italic",
     "scope": "global"
   */
-  --content-title-font-style: normal;
+  #{--content-title-font-style}: normal;
 
   /* VoogStyle
     "pathI18n": ["content", "title"],
@@ -97,7 +97,7 @@
     "icon": "underline",
     "scope": "global"
   */
-  --content-title-text-decoration: none;
+  #{--content-title-text-decoration}: none;
 
   /* VoogStyle
     "pathI18n": ["content", "title"],
@@ -111,7 +111,7 @@
     "icon": "uppercase",
     "scope": "global"
   */
-  --content-title-text-transform: none;
+  #{--content-title-text-transform}: none;
 
   /* VoogStyle
     "pathI18n": ["content", "title"],
@@ -121,7 +121,7 @@
     "scope": "global",
     "featured": true
   */
-  --content-title-color: $color-two;
+  #{--content-title-color}: $color-two;
 
   /* VoogStyle
     "pathI18n": ["content", "date"],
@@ -133,7 +133,7 @@
     "scope": "global",
     "featured": true
   */
-  --post-date-font-size: 20px;
+  #{--post-date-font-size}: 20px;
 
   /* VoogStyle
      "pathI18n": ["content", "date"],
@@ -145,7 +145,7 @@
      "unit": "em",
      "scope": "global"
   */
-  --post-date-line-height: 1.6em;
+  #{--post-date-line-height}: 1.6em;
 
   /* VoogStyle
     "pathI18n": ["content", "date"],
@@ -159,7 +159,7 @@
     "icon": "bold",
     "scope": "global"
   */
-  --post-date-font-weight: 400;
+  #{--post-date-font-weight}: 400;
 
   /* VoogStyle
     "pathI18n": ["content", "date"],
@@ -173,7 +173,7 @@
     "icon": "italic",
     "scope": "global"
   */
-  --post-date-font-style: normal;
+  #{--post-date-font-style}: normal;
 
   /* VoogStyle
     "pathI18n": ["content", "date"],
@@ -187,7 +187,7 @@
     "icon": "underline",
     "scope": "global"
   */
-  --post-date-text-decoration: none;
+  #{--post-date-text-decoration}: none;
 
   /* VoogStyle
     "pathI18n": ["content", "date"],
@@ -201,7 +201,7 @@
     "icon": "uppercase",
     "scope": "global"
   */
-  --post-date-text-transform: uppercase;
+  #{--post-date-text-transform}: uppercase;
 
   /* VoogStyle
     "pathI18n": ["content", "date"],
@@ -211,7 +211,7 @@
     "scope": "global",
     "featured": true
   */
-  --post-date-color: $color-error;
+  #{--post-date-color}: $color-error;
 
   /* VoogStyle
     "pathI18n": ["content", "text"],
@@ -226,7 +226,7 @@
       "--form-field-text-font-size"
     ]
   */
-  --content-font-size: 20px;
+  #{--content-font-size}: 20px;
 
   /* VoogStyle
      "pathI18n": ["content", "text"],
@@ -238,7 +238,7 @@
      "unit": "em",
      "scope": "global"
   */
-  --content-line-height: $line-height;
+  #{--content-line-height}: $line-height;
 
   /* VoogStyle
     "pathI18n": ["content", "text"],
@@ -247,7 +247,7 @@
     "scope": "global",
     "featured": true
   */
-  --content-color: $color-two;
+  #{--content-color}: $color-two;
 
 /* VoogStyle
     "pathI18n": ["content", "link", "normal"],
@@ -264,7 +264,7 @@
       "--content-links-hover-font-weight"
     ]
   */
-  --content-links-font-weight: 400;
+  #{--content-links-font-weight}: 400;
 
   /* VoogStyle
     "pathI18n": ["content", "link", "hover"],
@@ -278,7 +278,7 @@
     "icon": "bold",
     "scope": "global"
   */
-  --content-links-hover-font-weight: 400;
+  #{--content-links-hover-font-weight}: 400;
 
   /* VoogStyle
     "pathI18n": ["content", "link", "normal"],
@@ -295,7 +295,7 @@
       "--content-links-hover-font-style"
     ]
   */
-  --content-links-font-style: normal;
+  #{--content-links-font-style}: normal;
 
   /* VoogStyle
     "pathI18n": ["content", "link", "hover"],
@@ -309,7 +309,7 @@
     "icon": "italic",
     "scope": "global"
   */
-  --content-links-hover-font-style: normal;
+  #{--content-links-hover-font-style}: normal;
 
   /* VoogStyle
     "pathI18n": ["content", "link", "normal"],
@@ -326,7 +326,7 @@
       "--content-links-hover-text-decoration"
     ]
   */
-  --content-links-text-decoration: none;
+  #{--content-links-text-decoration}: none;
 
   /* VoogStyle
     "pathI18n": ["content", "link", "hover"],
@@ -340,7 +340,7 @@
     "icon": "underline",
     "scope": "global"
   */
-  --content-links-hover-text-decoration: none;
+  #{--content-links-hover-text-decoration}: none;
 
   /* VoogStyle
     "pathI18n": ["content", "link", "normal"],
@@ -357,7 +357,7 @@
       "--content-links-hover-text-transform"
     ]
   */
-  --content-links-text-transform: none;
+  #{--content-links-text-transform}: none;
 
   /* VoogStyle
     "pathI18n": ["content", "link", "hover"],
@@ -371,7 +371,7 @@
     "icon": "uppercase",
     "scope": "global"
   */
-  --content-links-hover-text-transform: none;
+  #{--content-links-hover-text-transform}: none;
 
   /* VoogStyle
     "pathI18n": ["content", "link", "normal"],
@@ -381,7 +381,7 @@
     "scope": "global",
     "featured": true
   */
-  --content-links-color: $color-four;
+  #{--content-links-color}: $color-four;
 
    /* VoogStyle
     "pathI18n": ["content", "link", "hover"],
@@ -391,7 +391,7 @@
     "scope": "global",
     "featured": true
   */
-  --content-links-hover-color: $color-two;
+  #{--content-links-hover-color}: $color-two;
 
   // scss-lint:enable Comment, Indentation
 }
diff --git a/sources/components/custom-styles/template-cs-blog-list.scss b/sources/components/custom-styles/template-cs-blog-list.scss
index 5abb0f7..b11c195 100644
--- a/sources/components/custom-styles/template-cs-blog-list.scss
+++ b/sources/components/custom-styles/template-cs-blog-list.scss
@@ -29,7 +29,7 @@
      "unit": "px",
      "scope": "global"
   */
-  --blog-list-margin: 70px;
+  #{--blog-list-margin}: 70px;
 
   /* VoogStyle
     "pathI18n": ["blog", "title"],
@@ -41,7 +41,7 @@
     "scope": "global",
     "featured": true
   */
-  --blog-list-title-font-size: 20px;
+  #{--blog-list-title-font-size}: 20px;
 
   /* VoogStyle
      "pathI18n": ["blog", "title"],
@@ -53,7 +53,7 @@
      "unit": "em",
      "scope": "global"
   */
-  --blog-list-title-line-height: $line-height;
+  #{--blog-list-title-line-height}: $line-height;
 
   /* VoogStyle
     "pathI18n": ["blog", "title"],
@@ -67,7 +67,7 @@
     "icon": "bold",
     "scope": "global"
   */
-  --blog-list-title-font-weight: 400;
+  #{--blog-list-title-font-weight}: 400;
 
   /* VoogStyle
     "pathI18n": ["blog", "title"],
@@ -81,7 +81,7 @@
     "icon": "italic",
     "scope": "global"
   */
-  --blog-list-title-font-style: normal;
+  #{--blog-list-title-font-style}: normal;
 
   /* VoogStyle
     "pathI18n": ["blog", "title"],
@@ -95,7 +95,7 @@
     "icon": "underline",
     "scope": "global"
   */
-  --blog-list-title-text-decoration: none;
+  #{--blog-list-title-text-decoration}: none;
 
   /* VoogStyle
     "pathI18n": ["blog", "title"],
@@ -109,7 +109,7 @@
     "icon": "uppercase",
     "scope": "global"
   */
-  --blog-list-title-text-transform: uppercase;
+  #{--blog-list-title-text-transform}: uppercase;
 
   /* VoogStyle
     "pathI18n": ["blog", "title"],
@@ -119,7 +119,7 @@
     "scope": "global",
     "featured": true
   */
-  --blog-list-title-color: $color-two;
+  #{--blog-list-title-color}: $color-two;
 
   /* VoogStyle
     "pathI18n": ["blog", "date"],
@@ -131,7 +131,7 @@
     "scope": "global",
     "featured": true
   */
-  --blog-list-date-font-size: 12px;
+  #{--blog-list-date-font-size}: 12px;
 
   /* VoogStyle
      "pathI18n": ["blog", "date"],
@@ -143,7 +143,7 @@
      "unit": "em",
      "scope": "global"
   */
-  --blog-list-date-line-height: $line-height;
+  #{--blog-list-date-line-height}: $line-height;
 
   /* VoogStyle
     "pathI18n": ["blog", "date"],
@@ -157,7 +157,7 @@
     "icon": "bold",
     "scope": "global"
   */
-  --blog-list-date-font-weight: 400;
+  #{--blog-list-date-font-weight}: 400;
 
   /* VoogStyle
     "pathI18n": ["blog", "date"],
@@ -171,7 +171,7 @@
     "icon": "italic",
     "scope": "global"
   */
-  --blog-list-date-font-style: normal;
+  #{--blog-list-date-font-style}: normal;
 
   /* VoogStyle
     "pathI18n": ["blog", "date"],
@@ -185,7 +185,7 @@
     "icon": "underline",
     "scope": "global"
   */
-  --blog-list-date-text-decoration: none;
+  #{--blog-list-date-text-decoration}: none;
 
   /* VoogStyle
     "pathI18n": ["blog", "date"],
@@ -199,7 +199,7 @@
     "icon": "uppercase",
     "scope": "global"
   */
-  --blog-list-date-text-transform: uppercase;
+  #{--blog-list-date-text-transform}: uppercase;
 
   /* VoogStyle
     "pathI18n": ["blog", "date"],
@@ -209,7 +209,7 @@
     "scope": "global",
     "featured": true
   */
-  --blog-list-date-color: $color-four;
+  #{--blog-list-date-color}: $color-four;
 
   /* VoogStyle
     "pathI18n": ["blog", "text"],
@@ -224,7 +224,7 @@
       "--form-field-text-font-size"
     ]
   */
-  --content-font-size: 20px;
+  #{--content-font-size}: 20px;
 
   /* VoogStyle
      "pathI18n": ["blog", "text"],
@@ -236,7 +236,7 @@
      "unit": "em",
      "scope": "global"
   */
-  --content-line-height: $line-height;
+  #{--content-line-height}: $line-height;
 
   /* VoogStyle
     "pathI18n": ["blog", "text"],
@@ -245,7 +245,7 @@
     "scope": "global",
     "featured": true
   */
-  --content-color: $color-two;
+  #{--content-color}: $color-two;
 
 /* VoogStyle
     "pathI18n": ["blog", "link", "normal"],
@@ -262,7 +262,7 @@
       "--content-links-hover-font-weight"
     ]
   */
-  --content-links-font-weight: 400;
+  #{--content-links-font-weight}: 400;
 
   /* VoogStyle
     "pathI18n": ["blog", "link", "hover"],
@@ -276,7 +276,7 @@
     "icon": "bold",
     "scope": "global"
   */
-  --content-links-hover-font-weight: 400;
+  #{--content-links-hover-font-weight}: 400;
 
   /* VoogStyle
     "pathI18n": ["blog", "link", "normal"],
@@ -293,7 +293,7 @@
       "--content-links-hover-font-style"
     ]
   */
-  --content-links-font-style: normal;
+  #{--content-links-font-style}: normal;
 
   /* VoogStyle
     "pathI18n": ["blog", "link", "hover"],
@@ -307,7 +307,7 @@
     "icon": "italic",
     "scope": "global"
   */
-  --content-links-hover-font-style: normal;
+  #{--content-links-hover-font-style}: normal;
 
   /* VoogStyle
     "pathI18n": ["blog", "link", "normal"],
@@ -324,7 +324,7 @@
       "--content-links-hover-text-decoration"
     ]
   */
-  --content-links-text-decoration: none;
+  #{--content-links-text-decoration}: none;
 
   /* VoogStyle
     "pathI18n": ["blog", "link", "hover"],
@@ -338,7 +338,7 @@
     "icon": "underline",
     "scope": "global"
   */
-  --content-links-hover-text-decoration: none;
+  #{--content-links-hover-text-decoration}: none;
 
   /* VoogStyle
     "pathI18n": ["blog", "link", "normal"],
@@ -355,7 +355,7 @@
       "--content-links-hover-text-transform"
     ]
   */
-  --content-links-text-transform: none;
+  #{--content-links-text-transform}: none;
 
   /* VoogStyle
     "pathI18n": ["blog", "link", "hover"],
@@ -369,7 +369,7 @@
     "icon": "uppercase",
     "scope": "global"
   */
-  --content-links-hover-text-transform: none;
+  #{--content-links-hover-text-transform}: none;
 
   /* VoogStyle
     "pathI18n": ["blog", "link", "normal"],
@@ -379,7 +379,7 @@
     "scope": "global",
     "featured": true
   */
-  --content-links-color: $color-four;
+  #{--content-links-color}: $color-four;
 
    /* VoogStyle
     "pathI18n": ["blog", "link", "hover"],
@@ -389,7 +389,7 @@
     "scope": "global",
     "featured": true
   */
-  --content-links-hover-color: $color-two;
+  #{--content-links-hover-color}: $color-two;
 
   // scss-lint:enable Comment, Indentation
 }
diff --git a/sources/components/custom-styles/template-cs-button.scss b/sources/components/custom-styles/template-cs-button.scss
index f207ff5..b285061 100644
--- a/sources/components/custom-styles/template-cs-button.scss
+++ b/sources/components/custom-styles/template-cs-button.scss
@@ -25,7 +25,7 @@
     "editor": "colorPicker",
     "scope": "global"
   */
-  --button-background-color: #dadada;
+  #{--button-background-color}: #dadada;
 
   /* VoogStyle
     "pathI18n": ["button"],
@@ -37,7 +37,7 @@
     "featured": true,
     "scope": "global"
   */
-  --button-font-size: 16px;
+  #{--button-font-size}: 16px;
 
   /* VoogStyle
     "pathI18n": ["button"],
@@ -49,7 +49,7 @@
     "unit": "em",
     "scope": "global"
   */
-  --button-line-height: 1.7em;
+  #{--button-line-height}: 1.7em;
 
   /* VoogStyle
     "pathI18n": ["button"],
@@ -63,7 +63,7 @@
     "icon": "bold",
     "scope": "global"
   */
-  --button-font-weight: 400;
+  #{--button-font-weight}: 400;
 
   /* VoogStyle
     "pathI18n": ["button"],
@@ -77,7 +77,7 @@
     "icon": "italic",
     "scope": "global"
   */
-  --button-font-style: normal;
+  #{--button-font-style}: normal;
 
   /* VoogStyle
     "pathI18n": ["button"],
@@ -91,7 +91,7 @@
     "icon": "underline",
     "scope": "global"
   */
-  --button-text-decoration: none;
+  #{--button-text-decoration}: none;
 
   /* VoogStyle
     "pathI18n": ["button"],
@@ -105,7 +105,7 @@
     "icon": "uppercase",
     "scope": "global"
   */
-  --button-text-transform: none;
+  #{--button-text-transform}: none;
 
   /* VoogStyle
     "pathI18n": ["button"],
@@ -115,7 +115,7 @@
     "featured": true,
     "scope": "global"
   */
-  --button-color: $color-two;
+  #{--button-color}: $color-two;
 
   // scss-lint:enable Comment, Indentation
 }
diff --git a/sources/components/custom-styles/template-cs-content.scss b/sources/components/custom-styles/template-cs-content.scss
index 2fbcad9..dbce44b 100644
--- a/sources/components/custom-styles/template-cs-content.scss
+++ b/sources/components/custom-styles/template-cs-content.scss
@@ -18,7 +18,7 @@
 // =============================================================================
 :root {
   // scss-lint:disable Comment, Indentation
-  
+
   /* VoogStyle
     "pathI18n": ["content", "title"],
     "titleI18n": "size",
@@ -29,7 +29,7 @@
     "scope": "global",
     "featured": true
   */
-  --content-title-font-size: 46px;
+  #{--content-title-font-size}: 46px;
 
   /* VoogStyle
      "pathI18n": ["content", "title"],
@@ -41,7 +41,7 @@
      "unit": "em",
      "scope": "global"
   */
-  --content-title-line-height: 1em;
+  #{--content-title-line-height}: 1em;
 
   /* VoogStyle
     "pathI18n": ["content", "title"],
@@ -55,7 +55,7 @@
     "icon": "bold",
     "scope": "global"
   */
-  --content-title-font-weight: 400;
+  #{--content-title-font-weight}: 400;
 
   /* VoogStyle
     "pathI18n": ["content", "title"],
@@ -69,7 +69,7 @@
     "icon": "italic",
     "scope": "global"
   */
-  --content-title-font-style: normal;
+  #{--content-title-font-style}: normal;
 
   /* VoogStyle
     "pathI18n": ["content", "title"],
@@ -83,7 +83,7 @@
     "icon": "underline",
     "scope": "global"
   */
-  --content-title-text-decoration: none;
+  #{--content-title-text-decoration}: none;
 
   /* VoogStyle
     "pathI18n": ["content", "title"],
@@ -97,7 +97,7 @@
     "icon": "uppercase",
     "scope": "global"
   */
-  --content-title-text-transform: none;
+  #{--content-title-text-transform}: none;
 
   /* VoogStyle
     "pathI18n": ["content", "title"],
@@ -107,7 +107,7 @@
     "scope": "global",
     "featured": true
   */
-  --content-title-color: $color-two;
+  #{--content-title-color}: $color-two;
 
   /* VoogStyle
     "pathI18n": ["content", "sub_menu", "normal"],
@@ -119,7 +119,7 @@
     "scope": "global",
     "featured": true
   */
-  --content-submenu-font-size: $font-size - 4px;
+  #{--content-submenu-font-size}: $font-size - 4px;
 
   /* VoogStyle
      "pathI18n": ["content", "sub_menu", "normal"],
@@ -131,7 +131,7 @@
      "unit": "em",
      "scope": "global"
   */
-  --content-submenu-line-height: .85em;
+  #{--content-submenu-line-height}: .85em;
 
   /* VoogStyle
     "pathI18n": ["content", "sub_menu", "normal"],
@@ -149,7 +149,7 @@
       "--content-submenu-active-font-weight"
     ]
   */
-  --content-submenu-font-weight: 400;
+  #{--content-submenu-font-weight}: 400;
 
   /* VoogStyle
     "pathI18n": ["content", "sub_menu", "hover"],
@@ -163,7 +163,7 @@
     "icon": "bold",
     "scope": "global"
   */
-  --content-submenu-hover-font-weight: 400;
+  #{--content-submenu-hover-font-weight}: 400;
 
   /* VoogStyle
     "pathI18n": ["content", "sub_menu", "active"],
@@ -177,7 +177,7 @@
     "icon": "bold",
     "scope": "global"
   */
-  --content-submenu-active-font-weight: 400;
+  #{--content-submenu-active-font-weight}: 400;
 
   /* VoogStyle
     "pathI18n": ["content", "sub_menu", "normal"],
@@ -195,7 +195,7 @@
       "--content-submenu-active-font-style"
     ]
   */
-  --content-submenu-font-style: normal;
+  #{--content-submenu-font-style}: normal;
 
   /* VoogStyle
     "pathI18n": ["content", "sub_menu", "hover"],
@@ -209,7 +209,7 @@
     "icon": "italic",
     "scope": "global"
   */
-  --content-submenu-hover-font-style: normal;
+  #{--content-submenu-hover-font-style}: normal;
 
   /* VoogStyle
     "pathI18n": ["content", "sub_menu", "active"],
@@ -223,7 +223,7 @@
     "icon": "italic",
     "scope": "global"
   */
-  --content-submenu-active-font-style: normal;
+  #{--content-submenu-active-font-style}: normal;
 
   /* VoogStyle
     "pathI18n": ["content", "sub_menu", "normal"],
@@ -241,7 +241,7 @@
       "--content-submenu-active-text-decoration"
     ]
   */
-  --content-submenu-text-decoration: none;
+  #{--content-submenu-text-decoration}: none;
 
   /* VoogStyle
     "pathI18n": ["content", "sub_menu", "hover"],
@@ -255,7 +255,7 @@
     "icon": "underline",
     "scope": "global"
   */
-  --content-submenu-hover-text-decoration: none;
+  #{--content-submenu-hover-text-decoration}: none;
 
   /* VoogStyle
     "pathI18n": ["content", "sub_menu", "active"],
@@ -269,7 +269,7 @@
     "icon": "underline",
     "scope": "global"
   */
-  --content-submenu-active-text-decoration: none;
+  #{--content-submenu-active-text-decoration}: none;
 
   /* VoogStyle
     "pathI18n": ["content", "sub_menu", "normal"],
@@ -287,7 +287,7 @@
       "--content-submenu-active-text-transform"
     ]
   */
-  --content-submenu-text-transform: none;
+  #{--content-submenu-text-transform}: none;
 
   /* VoogStyle
     "pathI18n": ["content", "sub_menu", "hover"],
@@ -301,7 +301,7 @@
     "icon": "uppercase",
     "scope": "global"
   */
-  --content-submenu-hover-text-transform: none;
+  #{--content-submenu-hover-text-transform}: none;
 
   /* VoogStyle
     "pathI18n": ["content", "sub_menu", "active"],
@@ -315,7 +315,7 @@
     "icon": "uppercase",
     "scope": "global"
   */
-  --content-submenu-active-text-transform: uppercase;
+  #{--content-submenu-active-text-transform}: uppercase;
 
   /* VoogStyle
     "pathI18n": ["content", "sub_menu", "normal"],
@@ -325,7 +325,7 @@
     "scope": "global",
     "featured": true
   */
-  --content-submenu-color: $color-four;
+  #{--content-submenu-color}: $color-four;
 
    /* VoogStyle
     "pathI18n": ["content", "sub_menu", "hover"],
@@ -334,7 +334,7 @@
     "editor": "colorPicker",
     "scope": "global"
   */
-  --content-submenu-hover-color: $color-two;
+  #{--content-submenu-hover-color}: $color-two;
 
    /* VoogStyle
     "pathI18n": ["content", "sub_menu", "active"],
@@ -343,7 +343,7 @@
     "editor": "colorPicker",
     "scope": "global"
   */
-  --content-submenu-active-color: $color-two;
+  #{--content-submenu-active-color}: $color-two;
 
   /* VoogStyle
     "pathI18n": ["content", "text"],
@@ -358,7 +358,7 @@
       "--form-field-text-font-size"
     ]
   */
-  --content-font-size: 20px;
+  #{--content-font-size}: 20px;
 
   /* VoogStyle
      "pathI18n": ["content", "text"],
@@ -370,7 +370,7 @@
      "unit": "em",
      "scope": "global"
   */
-  --content-line-height: $line-height;
+  #{--content-line-height}: $line-height;
 
   /* VoogStyle
     "pathI18n": ["content", "text"],
@@ -382,7 +382,7 @@
       "--form-field-text-color"
     ]
   */
-  --content-color: $color-two;
+  #{--content-color}: $color-two;
 
 /* VoogStyle
     "pathI18n": ["content", "link", "normal"],
@@ -399,7 +399,7 @@
       "--content-links-hover-font-weight"
     ]
   */
-  --content-links-font-weight: 400;
+  #{--content-links-font-weight}: 400;
 
   /* VoogStyle
     "pathI18n": ["content", "link", "hover"],
@@ -413,7 +413,7 @@
     "icon": "bold",
     "scope": "global"
   */
-  --content-links-hover-font-weight: 400;
+  #{--content-links-hover-font-weight}: 400;
 
   /* VoogStyle
     "pathI18n": ["content", "link", "normal"],
@@ -430,7 +430,7 @@
       "--content-links-hover-font-style"
     ]
   */
-  --content-links-font-style: normal;
+  #{--content-links-font-style}: normal;
 
   /* VoogStyle
     "pathI18n": ["content", "link", "hover"],
@@ -444,7 +444,7 @@
     "icon": "italic",
     "scope": "global"
   */
-  --content-links-hover-font-style: normal;
+  #{--content-links-hover-font-style}: normal;
 
   /* VoogStyle
     "pathI18n": ["content", "link", "normal"],
@@ -461,7 +461,7 @@
       "--content-links-hover-text-decoration"
     ]
   */
-  --content-links-text-decoration: none;
+  #{--content-links-text-decoration}: none;
 
   /* VoogStyle
     "pathI18n": ["content", "link", "hover"],
@@ -475,7 +475,7 @@
     "icon": "underline",
     "scope": "global"
   */
-  --content-links-hover-text-decoration: none;
+  #{--content-links-hover-text-decoration}: none;
 
   /* VoogStyle
     "pathI18n": ["content", "link", "normal"],
@@ -492,7 +492,7 @@
       "--content-links-hover-text-transform"
     ]
   */
-  --content-links-text-transform: none;
+  #{--content-links-text-transform}: none;
 
   /* VoogStyle
     "pathI18n": ["content", "link", "hover"],
@@ -506,7 +506,7 @@
     "icon": "uppercase",
     "scope": "global"
   */
-  --content-links-hover-text-transform: none;
+  #{--content-links-hover-text-transform}: none;
 
   /* VoogStyle
     "pathI18n": ["content", "link", "normal"],
@@ -516,7 +516,7 @@
     "scope": "global",
     "featured": true
   */
-  --content-links-color: $color-four;
+  #{--content-links-color}: $color-four;
 
    /* VoogStyle
     "pathI18n": ["content", "link", "hover"],
@@ -526,7 +526,7 @@
     "scope": "global",
     "featured": true
   */
-  --content-links-hover-color: $color-two;
+  #{--content-links-hover-color}: $color-two;
 
   // scss-lint:enable Comment, Indentation
 }
diff --git a/sources/components/custom-styles/template-cs-focus-area.scss b/sources/components/custom-styles/template-cs-focus-area.scss
index 7ad276f..d4694ba 100644
--- a/sources/components/custom-styles/template-cs-focus-area.scss
+++ b/sources/components/custom-styles/template-cs-focus-area.scss
@@ -18,7 +18,7 @@
 // =============================================================================
 :root {
   // scss-lint:disable Comment, Indentation
-  
+
   /* VoogStyle
      "pathI18n": ["focus_area"],
      "titleI18n": "maximum_width",
@@ -29,7 +29,7 @@
      "unit": "px",
      "scope": "global"
   */
-  --focus-area-width: 1800px;
+  #{--focus-area-width}: 1800px;
 
   // scss-lint:enable Comment, Indentation
 }
diff --git a/sources/components/custom-styles/template-cs-footer.scss b/sources/components/custom-styles/template-cs-footer.scss
index 60c018c..61cc5f2 100644
--- a/sources/components/custom-styles/template-cs-footer.scss
+++ b/sources/components/custom-styles/template-cs-footer.scss
@@ -29,7 +29,7 @@
     "scope": "global",
     "featured": true
   */
-  --footer-font-size: 12px;
+  #{--footer-font-size}: 12px;
 
   /* VoogStyle
      "pathI18n": ["footer", "text"],
@@ -41,7 +41,7 @@
      "unit": "em",
      "scope": "global"
   */
-  --footer-line-height: $line-height;
+  #{--footer-line-height}: $line-height;
 
   /* VoogStyle
     "pathI18n": ["footer", "text"],
@@ -50,7 +50,7 @@
     "scope": "global",
     "featured": true
   */
-  --footer-color: $color-two;
+  #{--footer-color}: $color-two;
 
   // scss-lint:enable Comment, Indentation
 }
diff --git a/sources/components/custom-styles/template-cs-form.scss b/sources/components/custom-styles/template-cs-form.scss
index baf2578..425dfb0 100644
--- a/sources/components/custom-styles/template-cs-form.scss
+++ b/sources/components/custom-styles/template-cs-form.scss
@@ -29,7 +29,7 @@
     "scope": "global",
     "featured": true
   */
-  --form-field-text-font-size: 16px;
+  #{--form-field-text-font-size}: 16px;
 
   /* VoogStyle
      "pathI18n": ["form", "text"],
@@ -41,7 +41,7 @@
      "unit": "em",
      "scope": "global"
   */
-  --form-field-text-line-height: 1.6;
+  #{--form-field-text-line-height}: 1.6;
 
   /* VoogStyle
     "pathI18n": ["form", "text"],
@@ -55,7 +55,7 @@
     "icon": "bold",
     "scope": "global"
   */
-  --form-field-text-font-weight: 400;
+  #{--form-field-text-font-weight}: 400;
 
   /* VoogStyle
     "pathI18n": ["form", "text"],
@@ -69,7 +69,7 @@
     "icon": "italic",
     "scope": "global"
   */
-  --form-field-text-font-style: normal;
+  #{--form-field-text-font-style}: normal;
 
   /* VoogStyle
     "pathI18n": ["form", "text"],
@@ -83,7 +83,7 @@
     "icon": "underline",
     "scope": "global"
   */
-  --form-field-text-text-decoration: none;
+  #{--form-field-text-text-decoration}: none;
 
   /* VoogStyle
     "pathI18n": ["form", "text"],
@@ -97,7 +97,7 @@
     "icon": "uppercase",
     "scope": "global"
   */
-  --form-field-text-text-transform: none;
+  #{--form-field-text-text-transform}: none;
 
   /* VoogStyle
     "pathI18n": ["form", "text"],
@@ -107,7 +107,7 @@
     "scope": "global",
     "featured": true
   */
-  --form-field-text-color: $color-two;
+  #{--form-field-text-color}: $color-two;
 
   /* VoogStyle
     "pathI18n": ["form"],
@@ -116,7 +116,7 @@
     "scope": "global",
     "featured": true
   */
-  --form-field-border-color: $color-four;
+  #{--form-field-border-color}: $color-four;
 
   // scss-lint:enable Comment, Indentation
 }
diff --git a/sources/components/custom-styles/template-cs-header.scss b/sources/components/custom-styles/template-cs-header.scss
index 970fd8e..fbe758b 100644
--- a/sources/components/custom-styles/template-cs-header.scss
+++ b/sources/components/custom-styles/template-cs-header.scss
@@ -29,7 +29,7 @@
     "scope": "global",
     "featured": true
   */
-  --header-site-title-font-size: $h2-size;
+  #{--header-site-title-font-size}: $h2-size;
 
   /* VoogStyle
      "pathI18n": ["header", "title"],
@@ -41,7 +41,7 @@
      "unit": "em",
      "scope": "global"
   */
-  --header-site-title-line-height: 1.1em;
+  #{--header-site-title-line-height}: 1.1em;
 
   /* VoogStyle
     "pathI18n": ["header", "title"],
@@ -55,7 +55,7 @@
     "icon": "bold",
     "scope": "global"
   */
-  --header-site-title-font-weight: 600;
+  #{--header-site-title-font-weight}: 600;
 
   /* VoogStyle
     "pathI18n": ["header", "title"],
@@ -69,7 +69,7 @@
     "icon": "italic",
     "scope": "global"
   */
-  --header-site-title-font-style: normal;
+  #{--header-site-title-font-style}: normal;
 
   /* VoogStyle
     "pathI18n": ["header", "title"],
@@ -83,7 +83,7 @@
     "icon": "underline",
     "scope": "global"
   */
-  --header-site-title-text-decoration: none;
+  #{--header-site-title-text-decoration}: none;
 
   /* VoogStyle
     "pathI18n": ["header", "title"],
@@ -97,7 +97,7 @@
     "icon": "uppercase",
     "scope": "global"
   */
-  --header-site-title-text-transform: uppercase;
+  #{--header-site-title-text-transform}: uppercase;
 
   /* VoogStyle
     "pathI18n": ["header", "title"],
@@ -107,7 +107,7 @@
     "scope": "global",
     "featured": true
   */
-  --header-site-title-color: $color-two;
+  #{--header-site-title-color}: $color-two;
 
   /* VoogStyle
     "pathI18n": ["header", "main_menu", "normal"],
@@ -119,7 +119,7 @@
     "scope": "global",
     "featured": true
   */
-  --header-mainmenu-font-size: 12px;
+  #{--header-mainmenu-font-size}: 12px;
 
   /* VoogStyle
      "pathI18n": ["header", "main_menu", "normal"],
@@ -131,7 +131,7 @@
      "unit": "em",
      "scope": "global"
   */
-  --header-mainmenu-line-height: 1em;
+  #{--header-mainmenu-line-height}: 1em;
 
   /* VoogStyle
     "pathI18n": ["header", "main_menu", "normal"],
@@ -149,7 +149,7 @@
       "--header-mainmenu-active-font-weight"
     ]
   */
-  --header-mainmenu-font-weight: 400;
+  #{--header-mainmenu-font-weight}: 400;
 
   /* VoogStyle
     "pathI18n": ["header", "main_menu", "hover"],
@@ -163,7 +163,7 @@
     "icon": "bold",
     "scope": "global"
   */
-  --header-mainmenu-hover-font-weight: 400;
+  #{--header-mainmenu-hover-font-weight}: 400;
 
   /* VoogStyle
     "pathI18n": ["header", "main_menu", "active"],
@@ -177,7 +177,7 @@
     "icon": "bold",
     "scope": "global"
   */
-  --header-mainmenu-active-font-weight: 400;
+  #{--header-mainmenu-active-font-weight}: 400;
 
   /* VoogStyle
     "pathI18n": ["header", "main_menu", "normal"],
@@ -195,7 +195,7 @@
       "--header-mainmenu-active-font-style"
     ]
   */
-  --header-mainmenu-font-style: normal;
+  #{--header-mainmenu-font-style}: normal;
 
   /* VoogStyle
     "pathI18n": ["header", "main_menu", "hover"],
@@ -209,7 +209,7 @@
     "icon": "italic",
     "scope": "global"
   */
-  --header-mainmenu-hover-font-style: normal;
+  #{--header-mainmenu-hover-font-style}: normal;
 
   /* VoogStyle
     "pathI18n": ["header", "main_menu", "active"],
@@ -223,7 +223,7 @@
     "icon": "italic",
     "scope": "global"
   */
-  --header-mainmenu-active-font-style: normal;
+  #{--header-mainmenu-active-font-style}: normal;
 
   /* VoogStyle
     "pathI18n": ["header", "main_menu", "normal"],
@@ -241,7 +241,7 @@
       "--header-mainmenu-active-text-decoration"
     ]
   */
-  --header-mainmenu-text-decoration: none;
+  #{--header-mainmenu-text-decoration}: none;
 
   /* VoogStyle
     "pathI18n": ["header", "main_menu", "hover"],
@@ -255,7 +255,7 @@
     "icon": "underline",
     "scope": "global"
   */
-  --header-mainmenu-hover-text-decoration: none;
+  #{--header-mainmenu-hover-text-decoration}: none;
 
   /* VoogStyle
     "pathI18n": ["header", "main_menu", "active"],
@@ -269,7 +269,7 @@
     "icon": "underline",
     "scope": "global"
   */
-  --header-mainmenu-active-text-decoration: none;
+  #{--header-mainmenu-active-text-decoration}: none;
 
   /* VoogStyle
     "pathI18n": ["header", "main_menu", "normal"],
@@ -287,7 +287,7 @@
       "--header-mainmenu-active-text-transform"
     ]
   */
-  --header-mainmenu-text-transform: uppercase;
+  #{--header-mainmenu-text-transform}: uppercase;
 
   /* VoogStyle
     "pathI18n": ["header", "main_menu", "hover"],
@@ -301,7 +301,7 @@
     "icon": "uppercase",
     "scope": "global"
   */
-  --header-mainmenu-hover-text-transform: uppercase;
+  #{--header-mainmenu-hover-text-transform}: uppercase;
 
   /* VoogStyle
     "pathI18n": ["header", "main_menu", "active"],
@@ -315,7 +315,7 @@
     "icon": "uppercase",
     "scope": "global"
   */
-  --header-mainmenu-active-text-transform: uppercase;
+  #{--header-mainmenu-active-text-transform}: uppercase;
 
   /* VoogStyle
     "pathI18n": ["header", "main_menu", "normal"],
@@ -325,7 +325,7 @@
     "scope": "global",
     "featured": true
   */
-  --header-mainmenu-color: $color-four;
+  #{--header-mainmenu-color}: $color-four;
 
    /* VoogStyle
     "pathI18n": ["header", "main_menu", "hover"],
@@ -334,7 +334,7 @@
     "editor": "colorPicker",
     "scope": "global"
   */
-  --header-mainmenu-hover-color: $color-two;
+  #{--header-mainmenu-hover-color}: $color-two;
 
    /* VoogStyle
     "pathI18n": ["header", "main_menu", "active"],
@@ -343,7 +343,7 @@
     "editor": "colorPicker",
     "scope": "global"
   */
-  --header-mainmenu-active-color: $color-two;
+  #{--header-mainmenu-active-color}: $color-two;
 
   // scss-lint:enable Comment, Indentation
 }
diff --git a/sources/components/custom-styles/template-cs-headings.scss b/sources/components/custom-styles/template-cs-headings.scss
index 639d972..4b3931c 100644
--- a/sources/components/custom-styles/template-cs-headings.scss
+++ b/sources/components/custom-styles/template-cs-headings.scss
@@ -29,7 +29,7 @@
     "scope": "global",
     "featured": true
   */
-  --h1-font-size: $h1-size;
+  #{--h1-font-size}: $h1-size;
 
   /* VoogStyle
      "pathI18n": ["headings", "title"],
@@ -41,7 +41,7 @@
      "unit": "em",
      "scope": "global"
   */
-  --h1-line-height: 1em;
+  #{--h1-line-height}: 1em;
 
   /* VoogStyle
      "pathI18n": ["headings", "title"],
@@ -50,7 +50,7 @@
      "list": {{ base_alignment_set }},
      "scope": "global"
   */
-  --h1-alignment: left;
+  #{--h1-alignment}: left;
 
   /* VoogStyle
     "pathI18n": ["headings", "title"],
@@ -64,7 +64,7 @@
     "icon": "bold",
     "scope": "global"
   */
-  --h1-font-weight: 400;
+  #{--h1-font-weight}: 400;
 
   /* VoogStyle
     "pathI18n": ["headings", "title"],
@@ -78,7 +78,7 @@
     "icon": "italic",
     "scope": "global"
   */
-  --h1-font-style: normal;
+  #{--h1-font-style}: normal;
 
   /* VoogStyle
     "pathI18n": ["headings", "title"],
@@ -92,7 +92,7 @@
     "icon": "underline",
     "scope": "global"
   */
-  --h1-text-decoration: none;
+  #{--h1-text-decoration}: none;
 
   /* VoogStyle
     "pathI18n": ["headings", "title"],
@@ -106,7 +106,7 @@
     "icon": "uppercase",
     "scope": "global"
   */
-  --h1-text-transform: none;
+  #{--h1-text-transform}: none;
 
   /* VoogStyle
     "pathI18n": ["headings", "title"],
@@ -116,7 +116,7 @@
     "scope": "global",
     "featured": true
   */
-  --h1-color: $color-two;
+  #{--h1-color}: $color-two;
 
   /* VoogStyle
     "pathI18n": ["headings", "heading"],
@@ -128,7 +128,7 @@
     "scope": "global",
     "featured": true
   */
-  --h2-font-size: $h2-size;
+  #{--h2-font-size}: $h2-size;
 
   /* VoogStyle
      "pathI18n": ["headings", "heading"],
@@ -140,7 +140,7 @@
      "unit": "em",
      "scope": "global"
   */
-  --h2-line-height: $line-height;
+  #{--h2-line-height}: $line-height;
 
   /* VoogStyle
      "pathI18n": ["headings", "heading"],
@@ -149,7 +149,7 @@
      "list": {{ base_alignment_set }},
      "scope": "global"
   */
-  --h2-alignment: left;
+  #{--h2-alignment}: left;
 
   /* VoogStyle
     "pathI18n": ["headings", "heading"],
@@ -163,7 +163,7 @@
     "icon": "bold",
     "scope": "global"
   */
-  --h2-font-weight: 400;
+  #{--h2-font-weight}: 400;
 
   /* VoogStyle
     "pathI18n": ["headings", "heading"],
@@ -177,7 +177,7 @@
     "icon": "italic",
     "scope": "global"
   */
-  --h2-font-style: normal;
+  #{--h2-font-style}: normal;
 
   /* VoogStyle
     "pathI18n": ["headings", "heading"],
@@ -191,7 +191,7 @@
     "icon": "underline",
     "scope": "global"
   */
-  --h2-text-decoration: none;
+  #{--h2-text-decoration}: none;
 
   /* VoogStyle
     "pathI18n": ["headings", "heading"],
@@ -205,7 +205,7 @@
     "icon": "uppercase",
     "scope": "global"
   */
-  --h2-text-transform: uppercase;
+  #{--h2-text-transform}: uppercase;
 
   /* VoogStyle
     "pathI18n": ["headings", "heading"],
@@ -215,7 +215,7 @@
     "scope": "global",
     "featured": true
   */
-  --h2-color: $color-error;
+  #{--h2-color}: $color-error;
 
   /* VoogStyle
     "pathI18n": ["headings", "subheading"],
@@ -227,7 +227,7 @@
     "scope": "global",
     "featured": true
   */
-  --h3-font-size: $font-size;
+  #{--h3-font-size}: $font-size;
 
   /* VoogStyle
      "pathI18n": ["headings", "subheading"],
@@ -239,7 +239,7 @@
      "unit": "em",
      "scope": "global"
   */
-  --h3-line-height: $line-height;
+  #{--h3-line-height}: $line-height;
 
   /* VoogStyle
      "pathI18n": ["headings", "subheading"],
@@ -248,7 +248,7 @@
      "list": {{ base_alignment_set }},
      "scope": "global"
   */
-  --h3-alignment: left;
+  #{--h3-alignment}: left;
 
   /* VoogStyle
     "pathI18n": ["headings", "subheading"],
@@ -262,7 +262,7 @@
     "icon": "bold",
     "scope": "global"
   */
-  --h3-font-weight: 400;
+  #{--h3-font-weight}: 400;
 
   /* VoogStyle
     "pathI18n": ["headings", "subheading"],
@@ -276,7 +276,7 @@
     "icon": "italic",
     "scope": "global"
   */
-  --h3-font-style: normal;
+  #{--h3-font-style}: normal;
 
   /* VoogStyle
     "pathI18n": ["headings", "subheading"],
@@ -290,7 +290,7 @@
     "icon": "underline",
     "scope": "global"
   */
-  --h3-text-decoration: none;
+  #{--h3-text-decoration}: none;
 
   /* VoogStyle
     "pathI18n": ["headings", "subheading"],
@@ -304,7 +304,7 @@
     "icon": "uppercase",
     "scope": "global"
   */
-  --h3-text-transform: uppercase;
+  #{--h3-text-transform}: uppercase;
 
   /* VoogStyle
     "pathI18n": ["headings", "subheading"],
@@ -314,7 +314,7 @@
     "scope": "global",
     "featured": true
   */
-  --h3-color: $color-error;
+  #{--h3-color}: $color-error;
 
   // scss-lint:enable Comment, Indentation
 }
diff --git a/sources/components/custom-styles/template-cs-main-styles.scss b/sources/components/custom-styles/template-cs-main-styles.scss
index f950cf3..2221069 100644
--- a/sources/components/custom-styles/template-cs-main-styles.scss
+++ b/sources/components/custom-styles/template-cs-main-styles.scss
@@ -32,7 +32,7 @@
       "--focus-area-width"
      ]
   */
-  --site-width: $site-width;
+  #{--site-width}: $site-width;
 
   /* VoogStyle
      "pathI18n": ["main_styles"],
@@ -42,7 +42,7 @@
      "featured": true,
      "scope": "global"
   */
-  --font-one: $font-one;
+  #{--font-one}: $font-one;
 
   /* VoogStyle
      "pathI18n": ["main_styles"],
@@ -52,7 +52,7 @@
      "featured": true,
      "scope": "global"
   */
-  --font-two: $font-two;
+  #{--font-two}: $font-two;
 
   /* VoogStyle
      "pathI18n": ["main_styles", "colors"],
@@ -77,7 +77,7 @@
         "--button-color"
       ]
   */
-  --color-primary: $color-two;
+  #{--color-primary}: $color-two;
 
   /* VoogStyle
      "pathI18n": ["main_styles", "colors"],
@@ -96,7 +96,7 @@
         "--form-field-border-color"
      ]
   */
-  --color-secondary: $color-four;
+  #{--color-secondary}: $color-four;
 
   /* VoogStyle
      "pathI18n": ["main_styles", "colors"],
@@ -105,6 +105,6 @@
      "scope": "global",
      "featured": true
   */
-  --color-bg: $color-white;
+  #{--color-bg}: $color-white;
 
 }
diff --git a/sources/components/custom-styles/template-cs-table.scss b/sources/components/custom-styles/template-cs-table.scss
index fbe866c..c25f1e7 100644
--- a/sources/components/custom-styles/template-cs-table.scss
+++ b/sources/components/custom-styles/template-cs-table.scss
@@ -26,7 +26,7 @@
      "list": {{ base_border_style_set }},
      "scope": "global"
   */
-  --table-border-style: solid;
+  #{--table-border-style}: solid;
 
   /* VoogStyle
      "pathI18n": ["table"],
@@ -37,7 +37,7 @@
      "unit": "px",
      "scope": "global"
   */
-  --table-cell-padding: 10px;
+  #{--table-cell-padding}: 10px;
 
   /* VoogStyle
     "pathI18n": ["table"],
@@ -45,7 +45,7 @@
     "editor": "colorPicker",
     "scope": "global"
   */
-  --table-border-color: $color-four;
+  #{--table-border-color}: $color-four;
 
   // scss-lint:enable Comment, Indentation
 }