9

I am doing an online course on Advanced CSS and Sass and found out that the way it is shown in the course is a bit outdated.

The course uses node-sass in the dependencies, which is deprecated. A direct alternative to this would be to use Dart-sass (I will write my steps to do so in the end, maybe someone will benefit from this :))

Another alternative is to use the VS Code Extension "Live Sass Compiler". It seems that this option is quite well accepted.

However, I wonder what benefits and differences these options have. E.g. I had some troubles with the extension yesterday and then used the dart sass as a dependency and solved my problem this way. Maybe this was due to something wrong in my code, but still, it left me with this question and I think others might have the same in the future.

PS: It is my first question here, don't roast me if I did something wrong :D

For those interested in how to change the code from node-sass to dart-sass here are the steps (at least for me these were the steps in the course I did):

  1. Install dart sass using the command line: npm i -D sass
  2. Change your scripts where it says node-sass to just be sass (in package.json)
  3. Change the -w in your watch:sass script to --watch (in package.json)
  4. You can also do npm uninstall node-sass to get rid of it
MikhailRatner
  • 452
  • 6
  • 13
  • Welcome to the Stackoverflow community! Your question seems to be fine for a person, who just joined the site. In my opinion, using `Sass` isn't the best option for now. You'll saw my answer below. – AlexZeDim Mar 19 '21 at 17:22

2 Answers2

2

I do not know what exact tutorial you are looking at. Also, I am not so experienced at the front-end, but in my opinion, using Sass as a css-preprocessor isn't the best option on production for now.

But, since you are asking how to implement sass, I'll describe a procedure, like you are using React with npx create-react-app.

First, you were right, about using dart-sass over sass. This command should help you with that: npm install --save-dev sass. According to the question, seems you already tried that.

After that, add new script to your scripts in your package.json file: "sass" : "sass src/Sass:src/Css --watch --no-source-map" and you are done.

In my own opinion, I prefer to implement it via npm instead of VSC plugin. It will more stable after all. But if you are using it, for test/study purposes, I think, you could try both.

AlexZeDim
  • 3,520
  • 2
  • 28
  • 64
  • 1
    Hey @AlexZeDim, thank you for your answer :) Actually, my question was about the "benefits and differences between these two options". From your answer I understand that: - npm implementation is more stable - and VSC plugin is more useful for test/study purposes That's already good input! Let me know if you remember anything else in this regard :) – MikhailRatner Mar 21 '21 at 19:07
1

If you want to use the most actual version Dart SASS with 'Live Sass Compiler' you need to take care about the version. The most popular version is not supported for years so it does not support Dart Sass.

But there is a fork which is supported and as fork you can use same settings.

To your Question about NPM and Live Sass Compiler: both are Javascript Version off Sass. As Javascript versions they are not as fast as if you install SASS direct on your System. The difference between Javascript vesion itself its not as big. So I think the best choice between NPM and Live Sass compiler is to use Live Sass Compiler (the forked version!) as it is integrated to the editor and easier to use direct from there.

If you need a faster solution you really should install the original version. That is not as difficult as it sounds. And there is a VS Code Extension as well wich make it possible to use that original installed version easy direct up from VS Code.

Detailed Information:

Install SASS direct on your system:
https://sass-lang.com/install

Information to the named VS Code extension:
https://stackoverflow.com/a/66207572/9268485

Brebber
  • 2,986
  • 2
  • 9
  • 19
  • Hey, thanks for the reply. I did not know there is a difference between installing Sass directly and running it via JavaScript. However, my questions were referring to the pro's and con's of NPM and Live Sass Compiler. Can you elaborate on them if you know more about it?:) – MikhailRatner Mar 23 '21 at 15:02
  • Both are JS driven ... so there should not be a big difference in speed. As they are difference projects the the biggest difference is how to install and setup. (NPM SASS is installed by NPM separate from VS Code. Live Sass Compiler is to install as extension IN VS Code direct.) And maybe(!) there is another difference: Inbetween I got the rumor that `NPM Sass` not longer under maintannance and as of this not acutalized to the most actual version `Dart Sass`. But as I don't use NPM Sass I am not sure about that rumor. But it sounds serious so I think to that you may have a closer look. – Brebber Mar 23 '21 at 15:17
  • Maybe this informaiton could be helpful to you: https://www.npmjs.com/package/node-sass – Brebber Mar 23 '21 at 15:23
  • 1
    Hey @Berber, thanks for the answer. I already wrote in the description of my question about the deprecation and added a little guide on how to update to ```Dart Sass``` for other people. From your and the first answer, it seems that there are no further differences (besides the obvious points of course). Thanks for the answer though :) – MikhailRatner Mar 24 '21 at 13:52
  • 1
    Thx for addional information. I think that every information helps. To my impression most users are not aware about the new development up to now and the big change and more questions will come somtime ... even when rule `@use` becomes mor populare and and will be used by more public modules. Even as I personally prefer a VS Code based solution it is good to know that there is a NPM version of `Dart Sass`. So it is still comming up ... ;-) – Brebber Mar 24 '21 at 14:20
  • I installed sass as a dev dependency, and there are no `.css` files produced. The think is that in `.css` files the sass code is translated to be compatible with different browsers. Is that something that happens under the hood with the dependency, or do we miss that there? Thanks – Fotios Tsakiris Aug 19 '21 at 12:06