在 vs 代码中使用 sass 实时服务器进行编译时，scss 中出现未定义的变量错误答案

【问题标题】：Undefined variable error in scss while compiling using sass live server in vs code在 vs 代码中使用 sass 实时服务器进行编译时，scss 中出现未定义的变量错误
【发布时间】：2020-09-26 05:36:43
【问题描述】：

我是 sass 生态系统的新手，我正面临一个非常烦人的问题。我收到一个编译错误，说我的变量“$grid-width”未定义。我的代码没有任何问题。我将在下面附上我的相关编码。 *我在 vs code 中使用 live sass 编译器。

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

【问题讨论】：

$grid-width: 114rem !global; 有帮助吗？
@gorevanova 不起作用。任何其他解决方案。
我找到了问题所在。我没有为 grid.scss 文件添加下划线，即 _grid.scss

标签： css sass

【解决方案1】：

将 !global 标志添加到变量中：

$grid-width: 114rem !global;

Sass 支持两种类型的变量：局部变量和全局变量。

默认情况下，在任何选择器之外定义的所有变量都被视为全局变量。这意味着可以从我们样式表中的任何位置访问它们。

【讨论】：

您是否熟悉过类似的问题？ stackoverflow.com/questions/47506906/…