7

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;"
}


My variables value:

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


The line that pops the error:

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


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.

dippas
  • 58,591
  • 15
  • 114
  • 126
Elie G.
  • 1,514
  • 1
  • 22
  • 38

1 Answers1

9

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

So remove px from variable $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;

More Info about Sass units here

dippas
  • 58,591
  • 15
  • 114
  • 126
  • Ok, but if I use `$font-size-base` somewhere else would it create a problem? Cause if I take for exemble the font-size of my footer and I want to assign it the value `14px` from `$font-size-base` it's fine, it works. But if I remove the _px_, will node-sass automatically add it to the number? and if it's the case, will node know that I want pixel units and not rem units? – Elie G. Mar 14 '17 at 22:59
  • @DrunkenPoney you could add it like this `font-size: ($font-size-base * 1rem); font-size: ($font-size-base * 1px);` or you could use a `mixin` see the demo on my answer – dippas Mar 14 '17 at 23:13
  • A function that takes only the number part of it would have been better but the mixin will do the job. Thanks @dippas – Elie G. Mar 14 '17 at 23:17