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;

$line-height-base

的@debug

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个单位的<{1}}
• 一起删除!default关键字，后面声明的变量将覆盖前一个
• 对声明的两个变量使用相同的度量单位

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