SASS 错误：不兼容的单位：“px”和“px*px”

Posted 2023-03-06

【中文标题】SASS 错误：不兼容的单位：“px”和“px*px”

【英文标题】：SASS error: Incompatible units: 'px' and 'px*px'

【发布时间】：2017-08-05 11:24:50

【问题描述】：

我正在使用 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，因为这不是我第一次使用它，而且我整天都在使用它，没有出现任何此类错误。

【参考方案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 单元的信息here

【讨论】：

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

@DrunkenPoney 你可以像这样添加它font-size: ($font-size-base * 1rem); font-size: ($font-size-base * 1px); 或者你可以使用mixin 在我的回答中查看演示

一个只接受数字部分的函数会更好，但 mixin 会完成这项工作。谢谢@dippas