import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Guides/Custom Components/SCSS/Breakpoints" />

# SCSS: Breakpoints

**Note:** Storybook renders this page inside of an `iframe`! The width taken into account by the media query is that of the `iframe` and not the full viewport window. Hide Storybook's navigation sidebar (or pop out this page) to preview the media query against the full browser width.

---

<details style={{ marginBlock: '24px' }}>
    <summary>🚧 SCSS Support is experimental 🚧</summary>

SCSS support was introduced due to the lack of support for LESS in the Next.js app router.

Please avoid using it for other purposes, as the API may change or be removed in the future.

</details>

Import `breakpoints.less` from `@preply/ds-web-core` and use the breakpoint mixin:

```css
@use '@preply/ds-web-core/dist/generated/breakpoints' as *;

.container {
    display: flex;
    flex-direction: column;

    @include medium-l {
        flex-direction: row;
    }
}
```

Alternatively you can use the `$breakpoints` map to access the pixel values directly:

```css
@use '@preply/ds-web-core/dist/generated/breakpoints' as *;

.some-css-class {
    display: flex;
    flex-direction: column;

    @media (min-width: map-get($breakpoints, medium-l)) {
        flex-direction: row;
    }
}
```

We recommend using only `min-width` media queries in order to structure your code with a "mobile first" approach.

Check out this [small article (3 min read)](https://medium.com/swlh/use-min-width-not-max-width-in-your-css-e6898fcf6a78) for a quick explanation why.
