Ask coding questions

← Back to all posts
Is there any way to use SASS/SCSS in Repl.it?
jdeltoro (9)

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!

Comments
hotnewtop
duzun (5)

He is my solution to compile SASS in the browser:
1. Add <link type="text/scss" href=... /> 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 <link /> with a <style /> containing the compiled CSS.

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

SixBeeps (5037)

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.

jdeltoro (9)

@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!

SixBeeps (5037)

@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

jdeltoro (9)

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

[deleted]

What is SASS/SCSS?

jdeltoro (9)

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