Tip App Calculator using HTML SASS and JS

Hi guys, This is my first time using CSS preprocessor (SASS), if there's any suggestion or advice about it I'll really appreciate it, there's some question that I'm still confused, for example :

1. I watched a tutorial about making a separate file for the responsive part, but when I tried it, the media queries is at the top of the other CSS so it doesn't work, how do I make it that it appears in the bottom part of CSS ?

2. When there's many type of color is it better to declare it on a map or just declare it one by one ?

Once again any advice or suggestion are very appreciated, Thanks !!