Why my CSS code doesn’t work?

Question

I have seen it in the YouTube video “Let’s build a CSS game”
It was on SCSS, not in CSS, but I think it is the same chec the video at:
https://youtu.be/HkK7OdY8Z1E

Check my code.
Pd: I only go in the min 9:37 with the heart. And it dosen’t apear in the screen.
Please tell me what’s happening.
https://code.sololearn.com/WHhX3G2XMLIo/?ref=app
My code is up.

Answer 1

Sass is an extension to CSS, and allows for many different features that CSS alone cannot do. SCSS is a combination of the two, and is not the same as CSS alone. To implement SCSS into your code, you would need to add a script tag that allows for Sass to run (I would recommend checking out this code to figure out how they did it - https://code.sololearn.com/WYRpUtCarkPh/?ref=app )

Answer 2

Hi Octavio Aguayo,

Code Playground doesn't accept CSS variables (regardless of whether or not it is in a preprocessed language or in CSS3), so any part of your CSS that starts with the $ sign won't work.

Also, @function, @if, and @return are usable in SCSS but not CSS. CSS accepts @charset, @font-face, @import, @keyframes and @media.

So the vast majority of the CSS file doesn't work in Code Playground.

That's what's happening.

(Edit: Code Playground does accept CSS3 variables, but global variables must be declared in :root {...} to work.)

Answer 3

To fix, you can try to paste your CSS file here:

http://www.cssportal.com/scss-to-css/

I can't say how well it works though as I've never used this tool before.