I have a folder where I store all the variables and functions of the project. Separated by functionality in its own file, with a strong use of namespacing.
Right now, maybe because of lack of knowledge about dart-sass, I am forced to import all these files with @use every time they are needed.
index.scss
@use "core/color";
@use "core/font";
@use "core/spacing";
@use "core/breakpoint" as bp;
@use "core/mixins/normalize";
@use "core/functions" as *;
body {
background-color: color.$background;
font-family: font.$family;
font-size: rem(16px); // rem is a function inside _functions.scss
}
.row {
max-width: spacing.$content-max-width;
padding: 0 spacing.$content-padding;
@media (max-width: bp.$sm) {
padding: 0 spacing.$content-padding-sm;
}
}
.btn {
@include normalize.button;
}
So my question is: is there any way to get that same functionality with a single @use? I thought something like that would work, but it seems that @forward don't accept namespaces, only prefixes.
// What follows won't work, don't try it. I just want to show what I'm trying to achieve
core/_index.scss
@forward "color" as color;
@forward "font" as font;
@forward "spacing" as spacing;
@forward "breakpoint" as bp;
@forward "mixins/normalize" as normalize;
@forward "functions";
index.scss
@use "core" as *;
body {
background-color: color.$background;
font-family: font.$family;
font-size: rem(16px); // rem is a function inside _functions.scss
}
.row {
max-width: spacing.$content-max-width;
padding: 0 spacing.$content-padding;
@media (max-width: bp.$sm) {
padding: 0 spacing.$content-padding-sm;
}
}
.btn {
@include normalize.button;
}