Let's start with some context. Our primary sass file is named main.scss, which mainly imports other scss files.
/* ==========================================================================
Base
========================================================================== */
@import "base/colors";
@import "base/variables";
@import "base/typography";
@import "base/layout";
@import "base/font-icons";
@import "base/base";
@import "base/ie-fixes";
Additionally, we import components from outside the styles folder as part of our component-based development strategy. This means that each component has its own bundle containing .js, .html, and .scss files within a folder.
Now comes the question. Let's say we have a component called /account. Within the account.scss file, we are utilizing variables from styles/base/variables. If I include
@import "../../styles/base/variables"account.scss file, it may lead to duplicating code in the sass output, especially if there are both variable and rule declarations in variables.scss or colors.scss.
One solution could be to separate out rule declarations into a different file, leaving only variable declarations in the variables.scss file. This way, we can import the file without worrying about duplication.
The main question remains: what benefit does importing variable declarations bring to account.scss aside from documentation purposes?
I hope this explanation is clear enough. Feel free to ask any further questions for clarification.