Question

// variables.scss
html {

    &.light-theme {
        $primary-1: #3BB4C1;
        $primary-2: #3AAEBB;
        $primary-3: #35A0AC;
        $secondary-1: #E3E3E3;
        $secondary-2: #E0E0E0;
        $secondary-3: #D6D6D6;
        $subtle-1: #F6F5F5;
        $subtle-2: #EDECEC;
        $subtle-3: #E8E8E8;
    }
}

// styles.scss
@import "variables.scss";

html {
    background-color: $subtle-1;
}

// Compilation Error
// Error: Undefined variable: "$subtle-1".
//         on line 10 of sass/e:\Projects\newTab\client\styles\style\style.scss
// >>   background-color: $subtle-1;
//    -------------------^

我有一个 varaibles.scss 文件来存储我所有的变量。 Style.scss 存储用于设置 html 页面样式的代码。我已导入文件，但未定义变量。

Answer 1

您已经定义了块范围的变量。以下是 documentation 对这些内容的说明：

<块引用>

在块中声明的变量（SCSS 中的花括号或 Sass 中的缩进代码）通常是本地的，并且只能在它们声明的块内访问。

这意味着一旦您将它们放入一个块中，它们就无法导出到另一个文件中。您需要将变量放到全局范围内才能将其导入到另一个文件中：

variables.scss：

$subtle-1: #F6F5F5;
...

styles.scss：

@import "variables";

html {
    background-color: $subtle-1;
}

或者更好的是，使用 new module system：

@use "variables";

html {
    background-color: variables.$subtle-1;
}

Answer 2

如果我理解你的问题，你在类中写错了变量。正如文档提到的那样：

<块引用>

在顶层声明的变量

$primary-1: #3BB4C1;
$primary-2: #3AAEBB;
$primary-3: #35A0AC;
$secondary-1: #E3E3E3;
$secondary-2: #E0E0E0;
$secondary-3: #D6D6D6;
$subtle-1: #F6F5F5;
$subtle-2: #EDECEC;
$subtle-3: #E8E8E8;

scss 变量返回 null

2 个答案: