Why is the SCSS saying that the variable is undefined though the variable has been already defined?

Question

I was migrating the SCSS code from the previous @import rule to @forward and @use rule and I faced an error. And, while doing the conversion I am facing a problem that spits out some error. The error can be seen below after the end of the code.

In this project I have managed the files in this way.

style
  abstract
    __index.scss
    _color.scss
    _variable.scss
  components
    __index.scss
    _button.scss
  style.css
  style.css.map
  style.scss

The code alongside the name of the files can be found here.

// File: abstract/__index.scss

@forward "color";
@forward "variable";


// File: abstract/_color.scss
$color_m-dynamic--hue: 0;
$color_m-dynamic--saturation: 0%;
$color_m-dynamic-lightness: 50%;
$color_m-dynamic-transparent: transparent;

@media (prefers-color_scheme: light) {
    $color_m-dynamic-45: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 45%);
    $color_m-dynamic-50: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 50%);
    $color_m-dynamic-55: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 55%);
}

@media (prefers-color_scheme: dark) {
    $color_m-dynamic-45: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 55%);
    $color_m-dynamic-50: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 50%);
    $color_m-dynamic-55: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 45%);
    $color_m-dynamic-60: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 40%);
}



// File: component/__index.scss

@forward "button";



// File: component/__index.scss

@use "../abstract/_index" as abstract;
.button {
    height: 48px;
    max-height: 44px;
    min-width: 48px;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 24px; //rounded 24, edged 0, pill 4
    padding-left: 20px;
    padding-right: 20px;
    gap: 8px;


    &--solid {
        border: none;
        color: abstract.$color_m-dynamic-50;
        background-color: abstract.$color_m-dynamic-50;
        transition: all 600ms ease;

        &:hover {
            border: none;
            color: abstract.$color_m-dynamic-99;
            background-color: abstract.$color_m-dynamic-40;
        }
    }
}

Now I was expecting this code to work, I looked for the most possible sources for why I was getting the error but could not find any error.

The following are the errors I got:
Compilation Error
Error: Undefined variable.
   ╷
22 │         color: abstract.$color_m-dynamic-50;
   │                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  c:\Codebase\NeupDesign\style\component\_button.scss 22:16  @forward
  c:\Codebase\NeupDesign\style\component\__index.scss 2:1    @use
  c:\Codebase\NeupDesign\style\index.scss 3:1                root stylesheet

I don't actually have any idea on where I could have been doing the mistakes. If anyone can help me that would be a really great thing for me.

Thanks for looking at it. If anything, more is required, then please let me know.

I tried to using the following to check if it would work, but it didn't:

I used the following code for checking it.

@use "nameOfFile" as *; and then removed the name spacing variable to check if it would work, but I got the same error agian.

It would also be a help for me if anyone could suggest me if the solution can be found somewhere in the site.

I found something more to this problem. The error is coming from the index.scss file that is located inside the style folder.

the following does not generates any error but this does.

@use "abstract/_index" as abstract;
@use "component/_index" as component;

Adding the second line of the code provides the same error. I tried @use "foundation/__index" and @use "abstract/__index" and the same happens, so i don't think that it is due to the wrong naming of the file.

What I found was that the variable The following is my code:

$color_m-dynamic--hue: 0;
$color_m-dynamic--saturation: 0%;
$color_m-dynamic-lightness: 50%;
$color_m-dynamic-transparent: transparent;


@media (prefers-color_scheme: light) {
    $color_m-dynamic-0: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 0%);
    $color_m-dynamic-1: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 1%);
    $color_m-dynamic-2: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 2%);
    $color_m-dynamic-3: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 3%);
    $color_m-dynamic-4: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 4%);
    $color_m-dynamic-5: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 5%);
    $color_m-dynamic-10: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 10%);
    $color_m-dynamic-15: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 15%);
    $color_m-dynamic-20: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 20%);
    $color_m-dynamic-25: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 25%);
    $color_m-dynamic-30: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 30%);
    $color_m-dynamic-35: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 35%);
    $color_m-dynamic-40: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 40%);
    $color_m-dynamic-45: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 45%);
    $color_m-dynamic-50: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 50%);
    $color_m-dynamic-55: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 55%);
    $color_m-dynamic-60: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 60%);
    $color_m-dynamic-65: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 65%);
    $color_m-dynamic-70: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 70%);
    $color_m-dynamic-75: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 75%);
    $color_m-dynamic-80: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 80%);
    $color_m-dynamic-85: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 85%);
    $color_m-dynamic-90: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 90%);
    $color_m-dynamic-95: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 95%);
    $color_m-dynamic-96: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 96%);
    $color_m-dynamic-97: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 97%);
    $color_m-dynamic-98: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 98%);
    $color_m-dynamic-99: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 99%);
    $color_m-dynamic-100: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 100%);
}

@media (prefers-color_scheme: dark) {
    $color_m-dynamic-0: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 100%);
    $color_m-dynamic-1: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 99%);
    $color_m-dynamic-2: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 98%);
    $color_m-dynamic-3: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 97%);
    $color_m-dynamic-4: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 96%);
    $color_m-dynamic-5: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 95%);
    $color_m-dynamic-10: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 90%);
    $color_m-dynamic-15: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 85%);
    $color_m-dynamic-20: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 80%);
    $color_m-dynamic-25: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 75%);
    $color_m-dynamic-30: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 70%);
    $color_m-dynamic-35: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 65%);
    $color_m-dynamic-40: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 60%);
    $color_m-dynamic-45: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 55%);
    $color_m-dynamic-50: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 50%);
    $color_m-dynamic-55: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 45%);
    $color_m-dynamic-60: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 40%);
    $color_m-dynamic-65: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 35%);
    $color_m-dynamic-70: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 30%);
    $color_m-dynamic-75: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 25%);
    $color_m-dynamic-80: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 20%);
    $color_m-dynamic-85: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 15%);
    $color_m-dynamic-90: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 10%);
    $color_m-dynamic-95: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 5%);
    $color_m-dynamic-96: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 4%);
    $color_m-dynamic-97: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 3%);
    $color_m-dynamic-98: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 2%);
    $color_m-dynamic-99: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 1%);
    $color_m-dynamic-100: hsl($color_m-dynamic--hue, $color_m-dynamic--saturation, 0%);
}

Here none of the variable are being created. I don't know why but that is what is happening. If i remove the media queries the variables are then automatically created.

Are you sure that SCSS variables may contain underscores and hyphens? — paddotk, Mar 20 '23 at 09:27
I'm not an expert in scss, and what's the default value for $color_m-dynamic-50? it seems you define a @media for it, but it will only be defined if you have passed a theme to it? — huan feng, Mar 20 '23 at 09:29
One more thing, throwing the ```@media``` query and just setting the variables there works., like you said but is there any way to completely change the values of the variables based on what the media query is being used? @huan feng — Kishor Neupane, Mar 21 '23 at 07:14

huan feng · Answer 1 · 2023-03-22T09:57:03.773

1

It seems you define a @media for it, but it will only be defined if you have passed a theme to it, and change the values of the variables based on what the media query is being used seems not possible

Please refer to this thread for more detail, one possible solution is you can try to use mixins Using Sass Variables with CSS3 Media Queries

edited Mar 22 '23 at 09:57

answered Mar 20 '23 at 09:10

huan feng

7,307
2
32
56

The main reason behind doing this is that if we have the name of the file as _index.scss, we need to do the following: @use "index" meaning that _ and .scss are ignored by the scss compiler. – Kishor Neupane Mar 20 '23 at 09:12
I wrote __index.scss to get the index.scss file that does not have any real styles to keep in the top of the folder (i.e. in the first, make more accessible and easy for me") – Kishor Neupane Mar 20 '23 at 09:14

Karthik Kedlaya · Answer 2 · 2023-03-20T10:10:28.137

0

you can import your "abstract/__index.scss" inside "File: component/__index.scss" as

@import 'abstract/__index';

and set your var as

color: $color_m-dynamic-50;

for more information about scss import please refer: https://sass-lang.com/documentation/at-rules/import

edited Mar 20 '23 at 10:10

answered Mar 20 '23 at 09:44

Karthik Kedlaya

1
2

I don't think that would work. I have tried using it but the ```@use``` can only be used in a file. If I use the ```@use "abstract/__index.scss"``` in the file component/__index.scss, that would mean that i could use the abstract/__index.scss values in only the file component/__index.scss, and I don't need that. Thanks for looking at it though. – Kishor Neupane Mar 20 '23 at 09:55

Why is the SCSS saying that the variable is undefined though the variable has been already defined?

2 Answers2