Repository files navigation

A JS/SCSS utility that syncs (S)CSS breakpoints with runtime JavaScript by exporting breakpoint maps as CSS custom properties and providing a tiny JS helper to read and compare them against the current viewport (e.g. bp.lessThan, bp.greaterThan).

npm install @webfactoryde/breakpoints-export

Define your breakpoints as a Sass map and import the SCSS mixin in your module(s) and use it to generate the necessary Custom Properties:

@use'@webfactoryde/breakpoints-export'as*;$breakpoints: (screen-m:768px,screen-l:1200px,navigation-breakpoint:875px,);@includebreakpoints-export($breakpoints);

Import thebreakpoints-export function in your module(s) and use the comparison you need:

// your moduleimportbpfrom'@webfactoryde/breakpoints-export';if(bp.greaterThan('navigation-breakpoint')){// do cool stuff}