You’re generating files that don’t need to be generated.
- screen.scss -> screen.css
- base.scss -> base.css
- catalog.scss -> catalog.css
The catalog file is being compiled on its own. Since it is not importing base.scss, the variables are not set. Your screen.scss file generates as you expect because it is importing all of the necessary information.
What you want to do is rename your partials to begin with an underscore to prevent them from being compiled on their own:
- screen.scss -> screen.css
- _base.scss (not compiled)
- _catalog.scss (not compiled)