1

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;
}
Bati
  • 41
  • 6

0 Answers0