Just use Sass (SCSS specifically).
The actual most important rule is to co-locate styles for a selector, which is easier with Sass than without. The "traditional" method of placing all styles for a particular breakpoint in a single @media query at the bottom of the file (or eve worse, a different file entirely) is a good way to end up with spaghetti CSS that is difficult to override and impossible to maintain without introducing regressions.
Consider an everyday task for a CSS developer: "Go make the logo bigger/smaller on X screen size". How do you figure out where to put the new/changed styles? I suspect you might inspect the element in your browser to see how it displays at certain screen sizes, and then you go look for the selector (likely a class name) in the codebase. What happens if there are 12 results for .logo? Now you have to go scrolling around in the code to figure out which ones are nested inside of media queries in order to find the right place. Or maybe you just gi
