SASS错误：不兼容的单位：'px'和'px*px'。

Question

我正在使用SCSS更改bootstrap 4的样式以创建自己的样式，但是当我编译我的SCSS时，出现了这个错误：

{
  "status": 1,
  "file": "H:/!WEBSITE/modules/The Force - Bootstrap/content/scss/variables/variables.scss",
  "line": 330,
  "column": 34,
  "message": "Incompatible units: 'px' and 'px*px'.",
  "formatted": 
     "Error: Incompatible units: 'px' and 'px*px'. 
        on line 330 of scss/variables/variables.scss
        >> $input-height: (($font-size-base * $input-line-height) + ($input-padding-y * 2)) !default;"
}

我的变量值：

$font-size-base:          14px !default;
$line-height-base:        1.846 !default;
$input-line-height:       floor(($font-size-base * $line-height-base)) !default;
$input-padding-y:         6px !default;

出现错误的代码行：

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

我不明白为什么它不工作，也没有更好的办法来修复它。我使用node-sass编译SCSS，我不认为问题出在node-sass上，因为我已经使用它很长时间了，而且一整天都没有遇到这样的错误。

- Elie G.

Answer 1

你的问题在于你正在将px与px相乘，导致结果为px2。

因此，请从变量$font-size-base中删除 px。

$font-size-base:          14 !default;
$line-height-base:        1.846 !default;
$input-line-height:       floor(($font-size-base * $line-height-base)) !default;
$input-padding-y:         6px !default;
$input-height: (($font-size-base * $input-line-height) + ($input-padding-y * 2)) !default;

关于Sass单位的更多信息点击这里

- dippas

---

好的，但是如果我在其他地方使用$font-size-base会有问题吗？因为如果我以我的页脚字体大小为例，并且我想将它分配给$font-size-base的值为14px，那么没问题，它可以工作。但是如果我删除_px_，node-sass会自动将其添加到数字中吗？如果是这种情况，node会知道我想要像素单位而不是rem单位吗？ - Elie G.

@DrunkenPoney 你可以这样添加 font-size: ($font-size-base * 1rem); font-size: ($font-size-base * 1px); 或者你可以使用一个 mixin，请参考我的回答中的演示。 - dippas

一个只接受数字部分的函数可能会更好，但混入也能完成任务。谢谢@dippas - Elie G.