Reponsive layout using React, Scss and ProgressBar component

Hi everyone,

I tried my best developing this page, and this was my first time applying SASS to an app, i have some doubts about it, i'll be so glad if you guys could help me with some :D!

1. Since this was my first time using SASS, i didn't have any idea of how to apply it in the code, i did some research of how to implement in React and kind of adapted to the structure i usually use to code. Is there any kind of standard way to implement that in React? Or the way that i used is fine?

2. When preparing the styles files, i set up a function to calculate PXs to EMs, but i ended up needing to import the file in other .scss style to be able to use it. But I also did some @mixin breakpoint and that i could use without any import. Did i forget to set up something or is there a difference in using functions or mixins?

3. Also i saw that there is a difference in using the lib 'sass' and 'node-sass', because of @use and import uses, which one should i use?

Github solution repo: https://github.com/lucas860/FEM-fylo-data-storage-challenge