@import more performant alternative for sass

Question

I've discovered that @import has performance implications. However all of my sass files @import a global-constants.scss at the top of the file to reuse several variables for colour and other properties, so that I can change the main colour etc from one place.

Is there a more performant way to reuse variables in sass?

EDIT: upon pondering this further, I notice that my css file that is generated from my sass file after compilation, has no import statement, and all of the variables are rendered as proper css values. So I'm probably not going to get any performance issues anyway, is my guess.

Answer 1

When you are using @import inside the SCSS, it will try to include the whole file and send it to the browser, (it is better, if you have configured it to return only one single CSS file or minified). That way, it is clean and better:

1. No @import in the output.
2. Source code is split using @import, keeping the modularity.

Summary: No performance issues because of @import.