Breakpoint

@unsass/breakpoint is a small, dependency-free Sass toolkit for managing responsive breakpoints. Define named breakpoints centrally and apply them with concise, composable mixins so media-query logic stays readable and consistent.

It supports named breakpoints and logical operators (up, down, only, between) so you can reuse breakpoint semantics across your stylesheets without duplicating raw pixel values.

Repository: github.com/unsass/breakpoint

Install

npm

npm install @unsass/breakpoint

yarn

yarn add @unsass/breakpoint

pnpm

pnpm add @unsass/breakpoint

Requirement

Breakpoint relies on the modern Sass if() syntax, so a Dart Sass compiler >= 1.95.0 is required.

Basic usage

SCSS

@use "@unsass/breakpoint";

.foo {
    @include breakpoint.up("lg") {
        color: darkcyan;
    }
}

CSS

@media (min-width: 960px) {
    .foo {
        color: darkcyan;
    }
}

Next steps

• Configuration — customize or extend the breakpoint tokens.
• Functions and Mixins — the full API.
• Best Practices — mobile-first patterns and pitfalls.