Sass : @import -> @use / @forward

Stop using @import with Sass | @use and @forward explained

style.scss    >

@use 'abstracts/fonts';

body {
	font-size: fonts.$font-size;
}

@use 'abstracts/fonts';

body {

            font-size:fonts. $font-size;

}

the reason for this is it prevents collisions between different variables if you have different variables with the same name. it used to be that you could easily overwrite one by accident, you can't do that anymore.

you now could use the same variable name in six different files import them all or use them all and they would all still work on their own so they wouldn't clash anymore and they wouldn't be overwriting one another.

---

_style.scss     >

@use 'components/cards';

components / _card.scss    >

@use '../abstracts/fonts' as *;
@use '../abstracts/colors' as c;


.card {

            font-size:  $font-size;

            color: c.$blue;

}

@use '../abstracts/colors' as c;

@use '../abstracts/fonts' as *;

@use  '../abstracts/functions' as *;

.card {

            font-size:font-size:  $font-size;

            color: c.$blue;

}

---

abstracts/_index.scss     >

@forward '../abstracts/colors';
@forward '../abstracts/fonts';

components/_card.scss   >

@use '../abstracts' as a;

.card {
	font-size: a.$font-size;
	color: a.$blue;
}

----------------

@use '../abstracts' as *;

.card {
	font-size: $font-size;
	color: $blue;
}