Issue with Live Sass Compiler and Unexpected Function Results

[RawanBee]

Greetings,

I hope you're doing well. I'm facing an issue with the Live Sass Compiler and I'm seeking insights from the community to help resolve this matter. I'm relatively new to opening discussions, so please bear with me as I provide context and details about the problem I'm encountering.

The Live Sass Compiler is working as expected in compiling Sass to CSS, but I've noticed that when it comes to using custom functions, I'm getting unexpected results. Here's a brief overview of the situation:

In a file named __functions.scss, I've defined several custom functions, one of which is vw1920:

@function vw1920($px) {  
  $m: calc($px / 1920);  
  @debug "vw1920 function: px = #{$px}, m = #{$m}";  
  @return #{Round($m * 100, 3)}vw;  
}

This vw1920 function calculates the equivalent viewport width (vw) value for a given pixel value $px, considering a base screen width of 1920 pixels.

I'm utilizing this function in another Sass file by importing it as follows:

@use 'sass/functions' as c;

.testClass {
    margin: c.vw1920(24) c.vw1920(150);
}

The issue I'm encountering is that the compilation result is not aligning with my expectations. Instead of the desired output, the compiled CSS looks like this:

.testClass {
    margin: 0vw 9vw;
}

However, I expect the compiled result to match the following:

.testClass {
    margin: 1.25vw 7.813vw;
}

I'm reaching out to seek insights, suggestions, or solutions that could help me address this issue. I've reviewed my code and the function implementation, but I'm unable to pinpoint the cause of this discrepancy.

Has anyone encountered a similar problem with the Live Sass Compiler or custom functions? Any guidance, recommendations, or troubleshooting tips you could provide would be greatly appreciated. I'm eager to learn and resolve this issue to ensure the accuracy of my Sass compilation.

Thank you in advance for your time and assistance.

[glenn2223]

So round() is a new CSS function SASS started supporting in v1.65.

By the new standard, you are telling the compiler to round to the nearest 3 (so, 1.15 becomes 0 and 7.813 becomes 9)

You can either declare your own round function (with a different name) that multiplies by 10^x, then divide by it, to get your value; like:

@use 'sass:math';

@function roundP($input, $precision) {  
    $v: math.pow(10, $precision);
    @return math.round($input * $v) / $v;
}

Or you can tell the function to round to the nearest 0.001; like:

@function vw1920($px) {  
    $m: calc($px / 1920);  
    @debug"vw1920 function: px = #{$px}, m = #{$m * 100}";  
    @return Round($m * 100, 0.001) + 0vw;  
}

---

This isn't the first and don't think it will be the last issue regarding this recent change.

For the new people dropping in here, all the new functions SASS is now resolving to the CSS standards can be seen at https://github.com/sass/dart-sass/blob/main/CHANGELOG.md#1650

[RawanBee]

I also removed the round and it worked:

@function vw1920($px) {
  $m: calc($px / 1920);
  @return #{($m * 100)}vw;
}

Thank you so much for your detailed answer!

[glenn2223]

UPDATE: SASS released v1.65 which rolled back support for CSS Units and Values 4 as it caused an unintentional breaking change (as was the case with this discussion). The extension was patched in v6.1.1 to reflect this. Support will be coming back but not before proper deprecation warning have been in place for at least 3 months