When using the SASS @debug directive, it has the ability to display two distinct values for a single variable

Encountering an issue while compiling a scss file to css, the error message reads as follows: 

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

To address this, I inserted @debug directives above the problematic line to identify the variables causing the error.

Surprisingly, the @debug directive displays two values per variable:

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`

The issue seems to stem from conflicting values in imported files:

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

This raises questions about how a variable can hold different values simultaneously and ensuring proper override order.

Further context reveals the specific error related to incompatible units at line 350 of the custom scss file:

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
   -----------------------------------^

The problematic line in question is:

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

Through @debug of $line-height-base, it's revealed that the value is set to `1.42857`.

csssass

Answer №1

Here's an explanation based on your code:

($input-padding-y * 2)

The value of $input-padding-y is 0.5rem.

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

The value of $line-height-base is 1.42857.

In this scenario, the variable $font-size-base is declared twice, with one declaration using the !default keyword. The presence of the !default keyword means that the initial declaration will be used unless the variable is reassigned elsewhere in the stylesheet.

Therefore, the value returned by $font-size-base is 13px.

Consequently, the equation can be calculated as:

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

This discrepancy leads to the error message regarding conflicting units (rem and px).

To resolve this issue, you have a few options:

  • Add the !default keyword to $height: 13px, ensuring that it uses the version with rem units,
  • Remove the !default keyword entirely, allowing the later declaration to take precedence over the earlier one,
  • Ensure that both variables are using the same unit of measurement.

If a variable is defined in two separate files, the values output during debugging may differ until the second declaration or reassignment occurs.

https://i.sstatic.net/0T3DZ.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Show spinner until the web page finishes loading completely

Could anyone guide me on how to display Ring.html for a brief moment until About.html finishes loading completely? I need the Ring.html page to vanish once About.html is fully loaded. As a beginner in web development, I would greatly appreciate your assist ...

javascripthtmlcss

How to add vertical bars within ng-repeat in AngularJS

I attempted to retrieve values from an array variable using ng-repeat within unordered lists. Although the values are displaying correctly and everything is functioning properly, I added vertical bars after each value to represent sub-categories on my page ...

javascripthtmlcssangularjs

What is causing my browser to retrieve JSON response from Express?

Scenario: I've designed a website that features a form with a POST action. The objective is for users to input their email addresses into the form. Once an email is submitted, a POST request is dispatched to the server. By utilizing Express and the M ...

javascriptjqueryhtmlcssexpress

Initiate a new line within a flex item

<Popper id={"simplePopper"} open={this.context.loading} style={{display: "flex", alignItems: "center", justifyContent: "center", backgroundColor: 'red',opacity:'0.5',width:'100%',he ...

cssmaterial-ui

Adjust the margin/padding of the Glyphicon within a Bootstrap badge

Currently, I have a glyphicon inside a badge and I want the glyphicon to have a smaller font size than the text. While I've achieved this, the issue now is that the glyphicon is not vertically centered within the badge. Whenever I attempt to add marg ...

htmlcsstwitter-bootstrap

Modifying CSS post-rendering to accommodate right-to-left or left-to-right text orientation

I have a unique single-page JavaScript website that retrieves text from a web request in JSON format. The direction of the text (RTL or LTR) is only determined once the response is received. Is there a method to re-render the page after receiving the res ...

css

This hyperlink is not redirecting to an external website

I recently downloaded a one pager template that has a unique design. All the hyperlinks within the template are set to link to specific sections on the page and use a data-link="" parameter. However, I encountered an issue when trying to link one of the m ...

javascriptjqueryhtmlcss

Place Div in the center of another Div

In my maze creation, I am trying to center an inner div, but no matter what I do, using margin: 0 auto; does not seem to work The inner div displays a sad smiley face when the user enters a wall and loses #highlight_lose { width: 550px; height:55 ...

htmlalignmentcentercss

Having trouble with Python Selenium CSS Selector? If your element is not visible, it

My goal is to search for all hyperlinks on a webpage that contain an XML download link and download them in a continuous loop. When I click on these hyperlinks, a form pops up that needs to be completed before I can proceed with the download. However, I ...

pythoncssseleniumwebdrivervisibility

Having trouble inserting a new row into the AngularJS table?

Having trouble adding a new row to the table in angularjs when clicking the add button. Here is the link to the Plunkr example -https://plnkr.co/edit/s7XAaG4JbvbTTxiZ0V2z?p=preview The HTML code snippet is as follows: <html> <head> <script ...

htmlcssangularjs

Inline display with automatic margin

I am seeking guidance from someone with more experience to help identify the source of this margin. Your assistance is greatly appreciated! https://i.stack.imgur.com/46k7k.png Below is the CSS code in question: .logo-icon { background-image: url(&ap ...

htmlcss

creating a multi-tiered dropdown menu using both CSS and JavaScript

I am in need of a multi-level (drop down) menu feature, that allows me to make changes to the menu in just one file, without having to navigate through each individual page. I require a three level menu. I have attempted to modify someone else's code ...

javascripthtmlcss

Showcasing the JavaScript source code of a website on an HTML background using solely front-end code

Is there a way to dynamically display the current front-end JavaScript source code (1 file) on an HTML as a background? Currently, I am manually updating a static image of my code as the background whenever there are changes, which is not ideal. The JavaSc ...

javascripthtmlcss

Modify the icons in the leaflet layer control

I'm looking to customize the icon for each Leaflet layers control on my website when there are multiple controls. The objective is to have unique icons for different layers. Here is an example of what I want to achieve: https://i.sstatic.net/Jxq6W.p ...

javascripthtmlcssleaflet

Tips for keeping the footer consistently at the bottom of the page without using a fixed position (to avoid overlapping with the main content)

I've been struggling to keep the footer at the bottom of my webpage. I came across a solution online suggesting to use fixed CSS positioning. However, when I applied this fix, the footer ended up overlapping with the actual content on the page. Is the ...

htmlcsstwitter-bootstrapbootstrap-4

Image displayed in tooltip when hovering over

I have been experimenting with displaying an image in a tooltip when hovering over it. I came across a fantastic solution that suits my needs: Codepen CSS: @import "compass"; * { box-sizing: border-box; } .tooltip { position: relative; border-bo ...

jqueryhtmlcsstooltipmousehover

CSS - text featuring a gentle shadow hue and a deeper foreground color

I'm encountering an aesthetic issue where my list of texts have random light/bright colors, making them hard to read on white backgrounds. I've tried setting the text color to shadow, but now I want the text itself to be a darker, more readable c ...

htmlcsscolors

Differences in Loading Gif Visualization Across Chrome, Safari, and Firefox

Having an issue with a loading image in Chrome, while it displays correctly in Safari and Firefox. In Chrome, I see two half-loading images instead of one whole image. Struggling to find a solution for this problem, any assistance would be greatly apprecia ...

javascriptjqueryhtmlcssloading

The boundary extends fully to the right

Recently, I created a calculator to convert kilograms to pounds and encountered an issue when trying to add a border to a p element. The problem was that the border extended all the way to the right side of the page. Here is the corresponding HTML code: &l ...

htmlcssborder

Doesn't the .stop(true) function completely clear the queue as it should?

My slideshow has a hover function to pause it using .stop(true). Upon mouse exit, it should resume playing from where it left off. However, currently, when I hover over it, the animation stops and then continues until it reaches its target, pausing there a ...

javascriptjqueryhtmlcss