Question 45996 in CSS Question posted in
Some basic documentation can be found here.

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

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:CodebaseNeupDesignstylecomponent_button.scss 22:16  @forward
  c:CodebaseNeupDesignstylecomponent__index.scss 2:1    @use
  c:CodebaseNeupDesignstyleindex.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.

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search