Coding in SASS on VSCode

JavaScript
1

Hi All,

someone has probably asked this before, but I’m unable to find the solution I think I’m looking for.

I’d like to be able to code in SASS within my HTML file and have that be compiled through VS CODE’s live server or my localhost server, but have been unable to achieve this.

The solution I’ve found so far is to use the Live Sass compiler extension, which basically just rewrites your code into CSS for it to then be linked to your HTML file and run through your browser.

This is fine when the files are separate, but if I’m coding Sass within the HTML file I can no longer take this approach.

How does the FCC coding environment manage this?

Anyone have any recommendations/tips?

Thanks in advance!

2

You can’t write SASS in HTML, browsers cannot understand SASS, they only know CSS. That’s why you need a precompiler to turn your SASS into regular CSS before it’s delivered to the browser.

I don’t know exactly how the FCC coding environment handles this, but there’s likely some JavaScript at work behind the scenes.

1 Like
3

Hello there,

The way the code is transpiled on the fCC platform is slightly convoluted. Majority of the logic is here: https://github.com/freeCodeCamp/freeCodeCamp/blob/main/client/src/templates/Challenges/rechallenge/transformers.js#L186

The main takeaway is:

  • Camper code is just text
  • If a Camper is on a challenge with SCSS, the necessary library is fetched to transpile it
  • The Camper code is nothing but text. So, it is ripped from the editor, and passed to the sassWorker which does its transpiling magic
  • What the sassWorker spits out is passed to the style element before being rendered in the iframe housing the preview

Hope this helps

1 Like
4

Why do you want to code the CSS in the HTML anyway?

5

You’re right, there’s no exact need, I always just try and make sure I know how to work these languages outside of the FCC environment to improve my practical skills :relaxed:

This was my first time working with SASS, and I wasn’t sure if it was a compiled language like PHP that can he run through the localhost server using XAMPP

VSCode let me install the package through npm, but it didn’t seem like it did anything (I’d already had extension packs to code Sass within VSCode itself) .

6

Thank you!

I had a feeling it was like this, nut nice to know for sure :grin:

7

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