SCSS preprocessing problem using keyframe names

73
June 02, 2021, at 03:20 AM

I'm trying to use Scss preprocessor with animations and I stumbled across some kind of error or bug. I know how to fix it, but but I want to know what's wrong and what exactly is causing this error.

This is probably preprocessing error, in which you use similar keyframe names for animations and using SCSS variables in these animations. It can be solved by just changing name of keyframe animation.

If you compile example code, compiled CSS code in class .game_not_hover will have wrong name of keyframe for animation. To be specific, name will be false, which should be not_hover_game.

With just changing name of keyframe to something like nhover_game will solve this problem.

Also this can be solved just by changing variable $animationLength to a value .4s

Code example with error.

$animationLength: .4s;
.game_not_hover {
    animation: not_hover_game $animationLength ease-in forwards;
}
.game_hover {
    animation: hover_game $animationLength ease-in forwards;
}
@keyframes hover_game {
    0%{
        opacity: 0.8;
    }
    100%{
        opacity: 1;    
    }
}
@keyframes not_hover_game {
    0%{
      opacity: 1; 
    }
    100% {
      opacity: 0.8;
    }
}

https://i.imgur.com/B2dItFZ.jpg - Image of error, made with https://beautifytools.com/scss-compiler.php

https://i.imgur.com/HsXPk8b.jpg - Image of fix, made with https://beautifytools.com/scss-compiler.php

Answer 1

That's definitely a bug in the flavor and version of the Sass compiler that beautifytools.com is using. Your code is fine and should produce not_hover_game in both places as expected.

However, the compiler you used seems to have interpreted not as the Sass boolean negation operator and _hover_game as its argument. Since anything other than false and null is truthy in Sass, _hover_game is truthy and so not _hover_game (note the space) is false. That said, underscores are word characters in CSS and SCSS, so it is wrong for the compiler to treat not as a separate token.

A simple fix that works on the beautifytools.com compiler is just to quote "not_hover_game" when referenced in the animation property. That's valid (S)CSS anyway and forces the compiler to see one token.

READ ALSO
QMenu created in a widget outside of my main Window doesn't appear

QMenu created in a widget outside of my main Window doesn't appear

I've created a QMenu in a widget outside of my main window, but when I try to show it on my Application it simply doesn't appear

62
How to Make a PHP Variable Return Text Instead of Nothing

How to Make a PHP Variable Return Text Instead of Nothing

My code needs to see and use the text held in a variable:

74
500 Error code with “Internal server Error” message, while doing POST method using MVVM and API in android application

500 Error code with “Internal server Error” message, while doing POST method using MVVM and API in android application

For API confirmation, I have tried in POSTMAN app, But response is getting properly and the data has been inserted successfullyBelow is the result of POSTMAN

103