NexusStar NexusStar - 12 days ago 4x
Sass (Sass) Question

SASS @debug directive prints two different values from one place for a variable

I'm receiving the following error when compiling scss file to css:

Error: src/scss/_custom.scss
Error: Incompatible units: 'rem' and 'px'.

So I put @debug directives above the line causing the error with offending variables calculation.

The @debug directive however prints two values by variable like this

src/scss/_custom.scss:346 DEBUG: $font-size-base `1rem`
src/scss/_custom.scss:348 DEBUG: $input-padding-y `0.5rem`
src/scss/_custom.scss:346 DEBUG: $font-size-base `13px`
src/scss/_custom.scss:348 DEBUG: $input-padding-y `0.5rem`

I have two separate files which are imported like this:

@import "variables" // $font-size-base: 13px;
@import "custom" // $font-size-base: 1rem !default;

As I understand it the problem comes from the second printed value that is used in calculation not the fist one.

How it is possible one variable to hold two separate values at one moment?

And how could I be sure that the second imported file overrides the variable value from the first.


The full text of the error is:

Error: src/scss/_custom.scss
Error: Incompatible units: 'rem' and 'px'.
on line 350 of src/scss/_custom.scss
>> $input-height: (($font-size-base * $line-height-base) + ($in

And the full line is:

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

@debug of

src/scss/_custom.scss:347 DEBUG: $line-height-base `1.42857`


Here's what is happening from your code

($input-padding-y * 2)

$input-padding-y is 0.5rem

($font-size-base * $line-height-base)

$line-height-base is 1.42857

Now you've declared $font-size-base twice and one of the declarations uses the !default keyword. This simply means use this !default value for a variable as long as it is not reassigned somewhere else in the stylesheet. Simply put if a variable is defined twice, the one with the !default keyword is not used

So $font-size-base returns 13px

Therefore the equation is evaluated as

$input-height: (  ( 13px * 1.42857 ) + ( 0.5rem * 2 )  )

This is why the error complains about rem and px

I am not sure exactly the importance and intention for each of those values but the problem can be fixed by either

  • adding to !default to the $height: 13px, that way it uses the one with rem units,
  • removing the !default keyword all together and the later declared variable will overwrite the previous one
  • using the same unit of measurement for both variables declared

If the same variable is defined twice in two different files, @debug can print two different values of the variable if it has not yet come across the second declaration or reassignment of the variable

enter image description here