大佬教程收集整理的这篇文章主要介绍了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,请注明来意。