程序问答   发布时间:2022-06-02  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了scss 变量返回 null大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

如何解决scss 变量返回 null?

开发过程中遇到scss 变量返回 null的问题如何解决?下面主要结合日常开发的经验,给出你关于scss 变量返回 null的解决方法建议,希望对你解决scss 变量返回 null有所启发或帮助;

// 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 页面样式的代码。我已导入文件,但未定义变量。

解决方法

您已经定义了块范围的变量。以下是 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;
}
,

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

在顶层声明的变量

$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全部内容,希望文章能够帮你解决scss 变量返回 null所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。