Atom doesn't recognise SCSS

Hi there,
I am trying to play around with BEM CSS in Atom. I have saved my stylesheet as BEMCSS.scss in the same folder with my project.html. When i load up my project.html from Packages -> atom-live-server i don’t see any stylesheet that applies to my project.html. (note here, i have included the

Regardless to Sass packages i installed (Sass Snippets/compilers), Atom doesn’t seem to see my scss file. Do i have to download anything else to make it work with scss?

Possibly the current work directory is not that of the HTML file.
Does the package have any way to change the work directory?

Alternatively start Atom in the command line:
Atom [path-where-HTML-lives]
…you fill in the the required path instead of the [path-where-HTML-lives].

Hi Snoop,
Thank you for your reply. However, If i run my project from the cmd as you suggested it just creates new files with no content.
I tried the Visual Studio Code as well and installed all the necessary plugins/packages for Sass as well and i am getting the same results too. I can’t figure out what goes wrong. The only app that displays my code properly in Sass is https://codepen.io/

You need to clarify what you mean by that, i.e.

  • do you transpile your SCSS into CSS?
  • do you link CSS or SCSS in your HTML?
  • do you transpile SCSS on runtime?

Let me explain in detail:
I thought to let Atom compile and run my SCSS files, i have to install a few packages for that. So, i installed scss-onsave & scss-snippets packages for that reason.
Also, i am giving to my html file where to look for the scss file declaring this --> within the head tags.

I don’t know what else to do for Atom to ‘see’ my stylesheet.

Please, explain what do you mean by “transpile your SCSS into CSS” & “transpile SCSS on runtime”.

Here i have to mention too that my firewall kicks off, by i allow access to the files to run on the server as an admin.

for some reason by Blockquote cannot be posted here in this forum.
link rel=“stylesheet” href=“C:\Users\NICK\Desktop\BEM CSS project\BEMCSS.scss” (in tags), that’s what i was trying to say above.

nor can edit!

This forum uses markdown, place verbatim text such as code in

```
a code block
```

and check the preview to see how it will be shown.

Re the issue; try opening the HTML file in a browser like Firefox. That would be the definitive test for Atom issue vs code issue.

1 Like

That’s likely why it doesn’t work. By default, a browser only understands CSS. You need to transpile the SCSS to CSS and then link to the resulting file in your HTML.

`indent preformatted text by 4 spaces`[quote="idleberg, post:11, topic:71706"]

to transpile the SCSS to CSS and then link to the resulting file in your HTML.
[/quote]

How do i declare this in HTML?

Finally i found the solution.
I was working on VS Code (sorry!) and one of the packages i installed was the Live Sass Compiler. I run it and basically it recreated the scss file into a css file and then i linked the new stylesheet into my html file with the new generated name of my css file.
Probably that’s what you meant by “transpile the SCSS to CSS” in a way, however you need to give an example to your replies because we are not all at the same level of development here…

Thanks for your answers anyway

Some people use the terms “compile” and “transpile” interchangably, but I think the latter is the correct (or more specific) term. A compiler transforms a high-level language to a low-level language (usually machine code), but the term itself can be used as an umbrella for all sorts of code transformations. A transpiler transforms source-code into source-code (e.g. SCSS to CSS, TypeScript to JavaScript etc.) I’m not sure about the origins of the term, but I assume it’s a combination of “transform” and “compile”.

Well, there’s some truth in that. But I also expect a basic level of knowledge when it comes to those things. For example, before you start working with SCSS, you should first make sure to have a basic understanding of HTML and CSS and how they work together. Higher level constructs like SCSS are the next step from there on.