Using scss or converting sass. And using babel

Coding Help
1

I don’t know how to use my scss file in My project. Does anyone know how to convert it to normal css or how to use it in a project?
If i need to install something or go to a site then just leave the links. Also, how do i use a js babel file. (Idk if its spelt bable or babel lol)

2

Hey there!

Are you taking the scss from CodePen?

3

Yes am taking it from codepen

1 Like
5

An easy way to convert the code is by compiling it to CSS.

To do that, go to the Codepen you’re getting the code from and do the following:

  1. Go to the CSS section.
    image

  2. Open the drop-down menu and click on ‘View Compiled CSS’.
    image

  3. Wait for the code to compile.

  4. When it’s finished, it should say ‘View Uncompiled CSS’, you can then close the drop-down menu.
    image

  5. You can now copy the code in CSS instead of SCSS.

And to answer your question about Babel, I’m not 100% sure but you can try using this: https://babeljs.io/

Hope it all works.

Best Regards,
Mj.

4 Likes
7

Thanks. Much obliged =)

1 Like
8

Hey, so I wanted to add if you’re not using codepen, you can compile Sass / SCSS to CSS using the Terminal either on your machine or within Visual Studio Code. The doc is here - Sass: Sass Basics. Just so you don’t feel like you HAVE to copy/paste into codepen.

Also - I can’t tell by your post but if you are using say, React as your front-end, you can install Sass as an npm package and then just link up a sass file the same way you would a css file, with a .scss extension instead of .css. Vite or webpack will bundle it for you.

1 Like
9

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.