diff --git a/packages/editor/src/theme/framework.scss b/packages/editor/src/theme/framework.scss
index 63934bc9..71009dde 100644
--- a/packages/editor/src/theme/framework.scss
+++ b/packages/editor/src/theme/framework.scss
@@ -35,7 +35,7 @@
       justify-content: center;
       align-items: center;
       flex-direction: column;
-      height: calc(100% - $--page-bar-height);
+      height: calc(100% - #{$--page-bar-height});
     }
 
     &-content {
diff --git a/packages/editor/src/theme/stage.scss b/packages/editor/src/theme/stage.scss
index eab888a9..cb7ea2b3 100644
--- a/packages/editor/src/theme/stage.scss
+++ b/packages/editor/src/theme/stage.scss
@@ -1,7 +1,7 @@
 .m-editor-stage {
   position: relative;
   width: 100%;
-  height: calc(100% - $--page-bar-height);
+  height: calc(100% - #{$--page-bar-height});
   overflow: hidden;
   display: flex;
   justify-content: center;