Undefined variable error in scss while compiling using sass live server in vs code

1

I’m new to the sass ecosystem and I’m facing a really annoying issue. I’m getting a compilation error saying my variable “$grid-width” is undefined. There is nothing wrong with my code. I will attach my relevant coding below. *I’m using live sass compiler in vs code.

//index.html

!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">

        <link rel="stylesheet" href="css/icon-font.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="shortcut icon" type="image/png" href="img/favicon.png">

        <title>Natours | Exciting tours for adventurous people</title>
    </head>
        <body>
            <header class="header">
                <div class="header__logo-box">
                    <img src="img/logo-white.png" alt="Logo Natours" class="header__logo">
                </div>
                <div class="header__text-box">
                    <h1 class="heading-primary">
                        <span class="heading-primary--main">Outdoors</span>
                        <span class="heading-primary--sub">Where life happens</span>
                    </h1>

                    <a href="#" class="btn btn--white btn--animated">Discover Our Tours</a>
                </div>

            </header>

    <section class="=grid-test">

        <div class="row">
            <div class="col-1-of-2">
                Col 1 of 2
            </div>
            <div class="col-1-of-2">
                Col 1 of 2
            </div>
        </div>

        <div class="row">
            <div class="col-1-of-3">
                Col 1 of 3
            </div>
            <div class="col-1-of-3">
                Col 1 of 3
            </div>
            <div class="col-1-of-3">
                Col 1 of 3
            </div>
        </div>

        <div class="row">
            <div class="col-1-of-3">
                Col 1 of 3
            </div>
            <div class="col-2-of-3">
                Col 2 of 3
            </div>
        </div>

        <div class="row">
            <div class="col-1-of-4">
                Col 1 of 4
            </div>
            <div class="col-1-of-4">
                Col 1 of 4
            </div>
            <div class="col-1-of-4">
                Col 1 of 4
            </div>
            <div class="col-1-of-4">
                Col 1 of 4
            </div>
        </div>

        <div class="row">
            <div class="col-1-of-4">
                Col 1 of 4
            </div>
            <div class="col-1-of-4">
                Col 1 of 4
            </div>
            <div class="col-2-of-4">
                Col 2 of 4
            </div>
        </div>

        <div class="row">
            <div class="col-1-of-4">
                Col 1 of 4
            </div>
            <div class="col-3-of-4">
                Col 3 of 4
            </div>
        </div>
    </section> 
    </body>
</html>

//main.scss

@import "abstracts/variables";
@import "abstracts/functions";
@import "abstracts/mixins";


@import "base/animations";
@import "base/base";
@import "base/typography";
@import "base/utilities";

@import "components/buttons";


@import "layout/header";
@import "layout/grid";

@import "pages/home";

//variables.scss


$color-primary: #55c57a;
$color-primary-light: #7ed56f;
$color-primary-dark: #28b485;

$color-grey-dark: #777;
$color-white: #fff;
$color-black: #000;

$grid-width: 114rem;
$gutter-vertical: 8rem;
$gutter-horizontal: 6rem;

//grid.scss


.row{
    max-width: $grid-width;
    background-color: #eee;
    margin: 0 auto;


    &:not(:last-child){
        margin-bottom:$gutter-vertical;
    }

    @include clearfix;

    [class^="col-"]{
        background-color: orangered;
        float: left;

        &:not(:last-child){
            margin-right:  $gutter-horizontal;
        }
    }

    .col-1-of-2{
        width: calc((100% - #{$gutter-horizontal}) / 2);

    }

    .col-1-of-3{
        width: calc((100% - 2 * #{$gutter-horizontal}) / 3);
    }

    .col-2-of-3{
        width: calc(2*((100%-2* #{$gutter-horizontal}) / 3) + #{$gutter-horizontal});
    }

    .col-1-of-4{
        width: calc((100% - 3 * #{$gutter-horizontal}) / 4);
    }
}
2

hey @ahnaf4,

are you adding an underscore before your scss files? the ones you want to import should be like this

_filename.scss

known as scss partials

3

yes I have done like that.

4

try adding this into your grid.scss file and see if it changes?

5

Is that the full variables file? That error occurs when the variable is declared after it is used, which suggests that you’re using it within the variables file. Sass just compiles things in order, so if something appears out of order, you can cause the undefined error.

Also, I would use @use rather than @import: the latter isn’t recommended because it tends to be hard to debug the kind of error you’re getting (note the sass compiler comes with a tool to automatically convert from @import to @use). In every file that uses stuff from the variables file, @use "path/to/variables". And in your index, just @use the actual files that contain stuff that will be output (variables etc don’t get output, so don’t get included there). It’s much easier to debug because then the compiler can do a much better job telling you where the problem is

6

That doesn’t work either. any other solutions. Thank you for your efforts

7

This is how my file structure looks like. can you please give a better answer based on this thankyou.

Screenshot (97)
Screenshot (97)1351×724 50.6 KB

8

@ahnaf4, to find out the problem, for testing purpose, you can declare
the $grid-width variable inside grid.scss, then run the code.

If it solves the issue, you can proceed to another test,
import variables.scss in your grid.scss without declaring
$grid-width in grid.scss

Whatever the output, pls let me know the result.

9

when I apply the first solution I don’t get any error.

When I import the variables in the grid.scss file I get an error saying file not found.

Thank You for your efforts.

1 Like
10

So you need to use the correct path and filename to solve this issue, and you need variables file in grid file if you don’t like to declare variable inside the grid file.

Thank you for updating the matter with the output.

11

the $grid-width is being applied I just now checked in the chrome dev tools but I get the error only in the vs code terminal saying variable undefined is that a problem in my machine or something

12

Can you open the variables file in VSCode and file that references the grid variable and run the compilation again? There is possibly a bug with the extension – this issue seems to what you’re describing:

There seem to be a lot of fairly similar issues here; if this is the same issue you’re getting I would possibly look at just running the sass compiler directly, rather than using that extension

13

keeping those files open doesn’t work either. what do u mean by running the compiler directly

14

Install sass -> run sass in the project directory.

https://sass-lang.com/install

15

I’ve got a similar issue. If found a problem in my case was file encoding and a BOM bit in one of the files.