SASS错误:不兼容的单位:"px"和"px * px" [英] SASS error: Incompatible units: 'px' and 'px*px'

问题描述

我正在使用SCSS更改引导程序4的样式以创建自己的样式，但是在编译SCSS时出现此错误:

I'm using SCSS to change the style of bootstrap 4 to create my own style, but when I compile my SCSS I get this error:

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

I don't understand why it is not working and I understand even less how to fix it. I compile SCSS with node-sass and I don't think the problem comes from node-sass because it's not the first time I use it and I've been using it all day long without getting any error of that kind.

推荐答案

您的问题是您要将px与px相乘，从而导致px 2

your issue is that you are multiplying px with px, resulting in px2

因此从变量$font-size-base

$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;

请参见 演示

See the DEMO

有关SASS单位的更多信息，此处

More Info about SASS units here

这篇关于SASS错误:不兼容的单位:"px"和"px * px"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！