fix: change breakpoint tokens to sass variables

etchteam · Sep 18, 2024 · 856a955 · 856a955
1 parent a58dbc2
commit 856a955
Showing 1 changed file with 13 additions and 12 deletions.
diff --git a/src/tokens/breakpoint.scss b/src/tokens/breakpoint.scss
@@ -1,12 +1,13 @@
-:root {
-  --mobius-breakpoint-xs: 0;
-  --mobius-breakpoint-sm: 30rem; // 480px
-  --mobius-breakpoint-md: 37.5rem; // 600px
-  --mobius-breakpoint-lg: 48rem; // 768px
-  --mobius-breakpoint-xl: 64rem; // 1024px
-  --mobius-breakpoint-xxl: 80rem; // 1280px
-  --mobius-breakpoint-xxxl: 90rem; // 1440px
-  --mobius-breakpoint-tablet: var(--mobius-breakpoint-lg);
-  --mobius-breakpoint-desktop: var(--mobius-breakpoint-xl);
-  --mobius-breakpoint-max: var(--mobius-breakpoint-xxxl);
-}
+// CSS variables don't work in media queries
+// So these breakpoint tokens are SASS variables instead
+
+$mobius-breakpoint-xs: 0;
+$mobius-breakpoint-sm: 30rem; // 480px
+$mobius-breakpoint-md: 37.5rem; // 600px
+$mobius-breakpoint-lg: 48rem; // 768px
+$mobius-breakpoint-xl: 64rem; // 1024px
+$mobius-breakpoint-xxl: 80rem; // 1280px
+$mobius-breakpoint-xxxl: 90rem; // 1440px
+$mobius-breakpoint-tablet: $mobius-breakpoint-lg;
+$mobius-breakpoint-desktop: $mobius-breakpoint-xl;
+$mobius-breakpoint-max: $mobius-breakpoint-xxxl;