css Question posted in
Some basic documentation can be found here.

How to use CSS round() in SCSS, that also have round?

Someone use my CSS library in SCSS, and it gives this error, when I use round().

jquery.terminal.css:850:22": argument $number of round($number) must be a number

According to MDN round is in baseline https://developer.mozilla.org/en-US/docs/Web/CSS/round

So how I’m supposed to make a CSS library that use round when users use SCSS?

EDIT: this is the code I use in my library:

line-height: round(var(--terminal-line, 1em));
Tags:

2

Answers


  1. 0

    According to SASS documentation, SASS overrides the default round() CSS function to be a SASS round() function that accepts $number and returns the closest whole number to $number. The default CSS function accepts 1 to 3 parameters though, which is likely the problem you are encountering. Since your code should is CSS, it shouldn’t be interpreted as SCSS so I’m confused as to why that is the case.

    What you should do is have your CSS library be a separate file that users can import into their SCSS file (via an @import declaration). See SO question 7111610 answer by tftd which explains how someone might do that if they are facing problems with the @import declaration, but as the question states, as of December 2014 the issue that prevented importing CSS files into SCSS files has been resolved.

    Login or Signup to reply.
  2. 0

    You can escape the SASS compilation using {''} (https://sass-lang.com/documentation/interpolation/#quoted-strings)

    line-height: #{'round(var(--terminal-line, 1em))'};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search