SASS error: Incompatible units: 'px' and '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 因为这不是我第一次使用它而且我一直在使用它一整天都没有得到任何那种错误。

Answer 1

您的问题是您将 px 与 px 相乘，结果是 px²

所以从变量 $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 个单位的更多信息 here

SASS error: Incompatible units: 'px' and 'px*px'

SASS error: Incompatible units: 'px' and 'px*px'

css

sass

node.js

twitter-bootstrap

bootstrap-4