-
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:
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:
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:
However, I expect the compiled result to match the following:
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. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 2 replies
-
So 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 @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 |
Beta Was this translation helpful? Give feedback.
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:Or you can tell the function to round to the nearest 0.001; like:
This is…