diff --git a/assets/css/menu.scss b/assets/css/menu.scss
index 1e08a9d..e352489 100644
--- a/assets/css/menu.scss
+++ b/assets/css/menu.scss
@@ -1,11 +1,11 @@
 @mixin menu {
+  --shadow-color: rgba(var(--background), 0.2);
   display: none;
   flex-direction: column;
-  $shadow-color: rgba(var(--background), 0.2);
-  $shadow: 0 10px $shadow-color, -10px 10px $shadow-color, 10px 10px $shadow-color;
+  --shadow: 0 10px var(--shadow-color), -10px 10px var(--shadow-color), 10px 10px var(--shadow-color);
   position: absolute;
   background: var(--background);
-  box-shadow: $shadow;
+  box-shadow: var(--shadow);
   color: white;
   border: 2px solid;
   margin: 0;
diff --git a/assets/css/post.scss b/assets/css/post.scss
index 31841da..b3b37d7 100644
--- a/assets/css/post.scss
+++ b/assets/css/post.scss
@@ -44,12 +44,12 @@
   }
 
   &-title {
-    $border: 3px dotted var(--accent);
+    --border: 3px dotted var(--accent);
     position: relative;
     color: var(--accent);
     margin: 0 0 15px;
     padding-bottom: 15px;
-    border-bottom: $border;
+    border-bottom: var(--border);
 
     &:after {
       content: '';
@@ -57,7 +57,7 @@
       bottom: 2px;
       display: block;
       width: 100%;
-      border-bottom: $border;
+      border-bottom: var(--border);
     }
 
     a {
diff --git a/assets/css/syntax.scss b/assets/css/syntax.scss
index 14a83b2..d68dfb5 100644
--- a/assets/css/syntax.scss
+++ b/assets/css/syntax.scss
@@ -117,9 +117,9 @@ pre[class*="language-"] {
 }
 
 .code-toolbar {
-  $code-margin: 40px;
+  --code-margin: 40px;
 	position: relative;
-	margin: $code-margin 0;
+	margin: var(--code-margin) 0;
 	padding: 20px;
 	border: 1px solid rgba(255, 255, 255, .1);
 
@@ -127,7 +127,7 @@ pre[class*="language-"] {
 	+ .highlight,
 	+ .highlight .code-toolbar {
 		border-top: 0;
-		margin-top: calc(-1 * $code-margin);
+		margin-top: calc(-1 * var(--code-margin));
 	}
 
 	pre, code {