CSS Snowflake Effect

Authoring Twine
1

Hi there! I was wondering if there is a way to get this CSS snowflake effect to work in Twine 2.3.9, using Sugarcube 2.31.1:

https://codepen.io/alvaromontoro/pen/GRNmdzB

It seems like it all works except for this part, some of which is red in my file.

@for $i from 1 through 50 {
  .snowflake:nth-child(#{$i}) {
    --size: #{random(5) * 0.2}vw;
    --left-ini: #{random(20) - 10}vw;
    --left-end: #{random(20) - 10}vw;
    left: #{random(100)}vw;
    animation: snowfall #{5 + random(10)}s linear infinite;
    animation-delay: -#{random(10)}s;
  }
}

I was just wondering if there’s a way to adjust it or something I could do differently to get it to work.

Thanks!

1 Like
2

This is SCSS and not CSS. That’s why it’s not working.

I don’t know if you can use SCSS instead of CSS or how you’d set that up in Sugarcube. You can try to compile it and copy the final output.

Try this online SCSS compiler.

1 Like
3

Thanks so much! I will give it a try!

4

As explained by @thornekin, the code in the CSS (SCSS) tab of that CodePen example is SCSS.

That same tab has a menu that is accessible by selecting the small V to the right of the tab’s name, which allows access to the View Compiled CSS option. Selecting that option will change the SCSS code being displayed into CSS, which you can then copy into the Story Stylesheet area of your Twine project.

NOTE:
If you use the View Compiled HTML option in the HTML tab to see the HTML elements required to implement the effect, you will notice that it requires multiple <div> elements to be added to the current page to make the effect work.
It may take some effort to convert that example into one that works within the main “story” area of a SugarCube based project.

3 Likes
5

Thank you so much!