css - SASS @debug 指令从一个地方为一个变量打印两个不同的值

Question

将 scss 文件编译为 css 时出现以下错误:

Error: src/scss/_custom.scss
Error: Incompatible units: 'rem' and 'px'.

所以我将@debug 指令放在导致错误的行上方，并使用违规变量计算。

然而，@debug 指令会像这样通过变量打印两个值

src/scss/_custom.scss:346 DEBUG: $font-size-base `1rem`
src/scss/_custom.scss:348 DEBUG: $input-padding-y `0.5rem`
src/scss/_custom.scss:346 DEBUG: $font-size-base `13px`
src/scss/_custom.scss:348 DEBUG: $input-padding-y `0.5rem`

我有两个单独的文件，它们是这样导入的:

@import "variables" // $font-size-base: 13px;
@import "custom" // $font-size-base: 1rem !default;

据我了解，问题出在计算中使用的第二个打印值，而不是第一个。

一个变量怎么可能同时保存两个不同的值？

我如何确定第二个导入文件覆盖了第一个文件的变量值。

编辑:

错误的全文是:

Error: src/scss/_custom.scss
Error: Incompatible units: 'rem' and 'px'.
        on line 350 of src/scss/_custom.scss
>> $input-height:                   (($font-size-base * $line-height-base) + ($in
   -----------------------------------^

全行是:

 $input-height:(($font-size-base * $line-height-base) + ($input-padding-y * 2)) !default;

@debug of $line-height-base

src/scss/_custom.scss:347 DEBUG: $line-height-base `1.42857`

Answer 1

这是您的代码中发生的事情

($input-padding-y * 2)

$input-padding-y 是 0.5rem

($font-size-base * $line-height-base)

$line-height-base 是 1.42857

现在您已经声明了两次 $font-size-base，其中一个声明使用了 !default 关键字。这只是意味着将此 !default 值用于变量，只要它没有在样式表中的其他地方重新分配。简单地说，如果一个变量被定义了两次，带有!default关键字的那个不被使用

所以 $font-size-base 返回 13px

因此方程的计算结果为

$input-height: (  ( 13px * 1.42857 ) + ( 0.5rem * 2 )  )

这就是错误提示 rem 和 px 的原因

我不确定每个值的重要性和意图，但问题可以通过任何一个解决

• 将 !default 添加到 $height: 13px，这样它就使用了 rem 单位，
• 一起删除!default关键字，后声明的变量将覆盖前一个
• 对声明的两个变量使用相同的度量单位

如果同一个变量在两个不同的文件中定义了两次，@debug 可以打印变量的两个不同值，前提是它还没有遇到变量的第二次声明或重新赋值