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

Question

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);
    }
}

Answer 1

Add the:global flag to the variable:

$grid-width: 114rem !global;

Sass supports two types of variables: local variables and global variables.

By default, all variables defined outside of any selector are considered global variables. This means that they can be accessed from anywhere in our style sheets.

Answer 2

I was having a similar issue with the Live Sass Compiler returning an error that a variable that I was using was undefined - when I triple checked that it was definitely defined!

Funnily enough the solution was right under my nose... In the Sass component file that was exclusively kicking out the error, I had named the file incorrectly. It was a gallery component, and thus a partial file. I had it named as simply

sass/components/gallery.scss

Silly me, Double check that you have included an underscore to indicate a partial file: as in my example it should've been:

sass/components/_gallery.scss

This is an old question but hopefully this will help others who have the same issue - it's definitely worth a double check. Also nice Natours project;) I've done that exact same CSS course it was great.

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

Question

2 answers

solution1
0 2020-06-07 08:09:09

solution2
0 2022-01-17 16:17:23

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

Question

2 answers

solution1 0 2020-06-07 08:09:09

solution2 0 2022-01-17 16:17:23

solution1
0 2020-06-07 08:09:09

solution2
0 2022-01-17 16:17:23