Skip to content
← Back to Community
Is there any way to use SASS/SCSS in Repl.it?
Profile icon
jdeltoro

I've been using Repl.it for a couple years now only using HTML, CSS & JS. Is there a way to install SASS/SCSS for a project? If so, how can I go about that?

Thanks guys!

Voters
Profile icon
Fareks
Profile icon
Autonoting
Profile icon
haroldao
Profile icon
codingjlu
Profile icon
Hugo0X
Profile icon
inojeon
Profile icon
jarfareco
Profile icon
Zwalker528
Profile icon
jdeltoro
Comments
hotnewtop
Profile icon
duzun

He is my solution to compile SASS in the browser:

  1. Add to HTML,
  2. Find all link[type="text/scss"] elements and fetch their href's over AJAX,
  3. Use github.com/medialize/sass.js to compile SASS -> CSS,
  4. Replace the with a containing the compiled CSS.

The result: https://minesweeper.duzun.repl.co

Profile icon
coding1001
Profile icon
haroldao
Profile icon
tueisacodepro

Create a file like this example:
file_name.scss

Profile icon
coding1001

actually there is a way to use sass! view my tutorial here: https://replit.com/talk/learn/How-To-Use-SASSSCSS-In-REPLIT/129414

Profile icon
11legos

Try compiling your SCSS here: http://beautifytools.com/scss-compiler.php

Profile icon
SixBeeps

SASS is an executable, which compiles down to CSS. I'll have to give it a try, but the process would be something like:

  • Install the package using NPM
  • Compile the SASS stylesheet
  • Plug the stylesheet into your HTML file

However, due to it not natively being supported, you won't have things like highlighting or auto-complete.

Profile icon
jdeltoro

@SixBeeps Yeah, I'm very comfortable with Repl, but I know some other online IDE's already have it installed/packaged so you can hit the ground running. I'll look into it further as far as installing it from scratch, thank you!

Profile icon
SixBeeps

@jdeltoro No problem.
I'm not at my normal computer rn, so if I may, could you try something out for me?
Try typing Ctrl+Shift+S on an HTML Repl

Profile icon
jdeltoro

@SixBeeps The Repl freezes and then redirects me to a Aw Snap page that can't be displayed.

Profile icon
[deleted]

What is SASS/SCSS?

Profile icon
jdeltoro

@TaylorLiang SASS (Syntactically Awesome Stylesheet) is a CSS pre-processor, which helps to reduce repetition with CSS and saves time.