Sass update | Breaking Change: @import and global built-in functions

Hey @everyone - has anyone got advice or a fix for the upcoming SASS release due to them depreciating @import and replacing this with @use @forward rules??

We currently use @import and the scss files we are using dont accept @user1

Further info here - removal of `@import` in the next major release of Sass.

Thanks

I did this with our platform last year, in preparation for the jump (we’re prepped now, I just haven’t fully updated SASS yet).

The migration tool was helpful at the start to give an idea of what was needed, most of the work I just did myself through changing and rebuilding. My replacements used @use but not @forward (didn’t have time to fully look into whether this was needed or would work for us).

By default, SASS will namespace your imports with @use, so when you call @use ‘mixins’, any mixins or functions within that file need to be named as such: mixins.border()

You can additionally namespace your imports to help prevent conflicts:
@use "base/mixins" as mx;
So if you have a mixin named border(), for example, you would prefix it with mixin when calling it: mx.border()

Or, you what I did and minimize the level of change by doing something like this so that your code doesn’t need to change:@use "base/mixins" as *; which means you can simply keep it as border() without any additional changes (though it does increase the potential for naming conflicts).

You’ll also need to make sure and add @use statements to pretty much all of your SASS files now, as they’re no longer implicitly available. If your files are in sub-folders, you’ll also need to adjust paths to account for this:
@use '../../styles/colors' as *;

I highly recommend running SASS with the --verbose flag on once you get into things, if you’re cleaning up your imports then now is as good a time as any to go after any other warnings and deprecations:

I will say, once it’s done it’s not too bad - and you do get a better overview in your files of what is being used and included. Helped me make some decisions about what could be condensed and removed or further split out so I’m not bundling unnecessary things. Hope this is useful, happy to try and expand on anything else if you’re still looking for information :slight_smile: