diff --git a/frappe/public/scss/desk/css_variables.scss b/frappe/public/scss/desk/css_variables.scss
index dc24570ab9..75c46baa7d 100644
--- a/frappe/public/scss/desk/css_variables.scss
+++ b/frappe/public/scss/desk/css_variables.scss
@@ -3,12 +3,12 @@
 :root,
 [data-theme="light"] {
 	// breakpoints
-	--xxl-width: map-get($grid-breakpoints, '2xl');
-	--xl-width: map-get($grid-breakpoints, 'xl');
-	--lg-width: map-get($grid-breakpoints, 'lg');
-	--md-width: map-get($grid-breakpoints, 'md');
-	--sm-width: map-get($grid-breakpoints, 'sm');
-	--xs-width: map-get($grid-breakpoints, 'xs');
+	--xxl-width: #{map-get($grid-breakpoints, '2xl')};
+	--xl-width: #{map-get($grid-breakpoints, 'xl')};
+	--lg-width: #{map-get($grid-breakpoints, 'lg')};
+	--md-width: #{map-get($grid-breakpoints, 'md')};
+	--sm-width: #{map-get($grid-breakpoints, 'sm')};
+	--xs-width: #{map-get($grid-breakpoints, 'xs')};
 
 	--navbar-height: 48px;