Guide for setting up with newest sass version?

[sinnbeck]

I am trying to get this to work in the latest sass version (dart). I have one file with my breakpoints, but it seems that it does not pick it up.

I have this _breakpoints.scss file where I forward the include-media package.

$breakpoints: (
    mobile_portrait: 320px,
    mobile_landscape: 480px,
    tablet: 740px,
    desktop: 980px,
    wide: 1300px,
);

$media-expressions: (
    'screen': 'screen',
    'print': 'print',
    'handheld': 'handheld',
    'landscape': '(orientation: landscape)',
    'portrait': '(orientation: portrait)',
    'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)',
    'retina3x': '(-webkit-min-device-pixel-ratio: 3), (min-resolution: 350dpi)',
) !default;

$handheld_bp: 'portrait', 'landscape';

@forward "~include-media/dist/_include-media.scss";

I then use it in a different file

@use '../settings/breakpoints' as m;

@include m.media('>wide') {
    .header .headerLogo {
        width: 50%;
    }
}

But it seems to try and and parse wide instead of using the breakpoint instead of parsing it

SassError: "Invalid unit `wide`."

[sinnbeck]

I got it working, but I am unsure if its correct. In my entrypoint I load it once with the correct settings

@use 'settings/breakpoints';
@use 'settings/breakpoints';
@use '~include-media' as im with (
  $breakpoints: breakpoints.$breakpoints,
  $media-expressions: breakpoints.$media-expressions,
);

And then in each file where I need it, I just load it like this

@use '~include-media' as im;