[Code Improvement]: Use @use instead of @import in scss files

[Lenni009]

Sass writes on their website:

The Sass team discourages the continued use of the @import rule. Sass will gradually phase it out over the next few years, and eventually remove it from the language entirely. Prefer the @use rule instead. (Note that only Dart Sass currently supports @use. Users of other implementations must use the @import rule instead.)

[Lenni009]

I need some practice in SCSS haha

[Khaoz-Topsy]

That is a lame decision 😕. @import makes more sense than @use i.m.o. I use SCSS in so many places 😅 . Well we aren't using dart-sass so we can't use the new syntax/keyword, but we can leave this here for future Kurt & Lenni 🤷

[Lenni009]

If I read this correctly, "Dart Sass" is the standard version you get from npm i sass: https://sass-lang.com/dart-sass
If that's not the version we're using, which one do we actually use?

I used @use successfully yesterday in my own project which had Sass installed with the command from above, and it works perfectly fine.

Edit: I see we're using node-sass. I wonder what's different between the two

Edit 2: node-sass is deprecated

[Khaoz-Topsy]

Oh interesting 🤔. node-sass was the standard way back when 👴. From what I understand, the sass compiler that is bundled in the npm package used to be built with python. To run the binaries you used to need to have python installed 🤮. They then wrapped the binary with nodejs, which made it a bit better, but it still broke a lot 😅 . I often had to do npm rebuild sass or something like that 🤔. Anyway nowadays I think the sass compiler is built in dart and the binary is better supported across different operating systems and node installations 😋

[Lenni009]

I upgraded to sass, it works without any changes. But changing the imports seems somewhat difficult.

When I just change the index.scss file to use @forward, it immediately throws errors because it doesn't know certain variables. So basically what I did in my JS, you did in your CSS haha

I'll try to slowly work through it and modernise it a bit, I see a few things that can be optimised

[Lenni009]

I'm struggling with src\scss\material-dashboard\bootstrap\scss_custom-forms.scss on line 65:

$line-height-base is a plain number
$custom-control-indicator-size is a rem value

You can't just subtract a rem value from a number according to sass:

SassError: 1.5 and 1rem are incompatible.

I don't know what exactly this calculation is supposed to do, maybe we can just hardcode a 1.5rem instead of the 1.5 from the variable? Or is there maybe another variable that can be used instead?

[Lenni009]

Also the formatting is not consistent, some files are intented with 2 spaces, others with 4 spaces

[Khaoz-Topsy]

🤷‍♀️ making it rem sounds good to me. Everything in the material-dashboard folder is from a theme, the files that are formatted differently are probably the ones I made a change in and the formatter took over 😋