3

I'm using Live Sass Compiler v3.0.0 in my VS Code and it throws a compilation error whenever I use the @use rule to import variables from another file. However, when I use the Sass command line interface (sass --watch) to compile my files, it throws no errors.

Therefore, I want to ask is this caused by a syntax error in my code or a bug of Live Sass Compiler.

Steps to Reproduce

File Structure & Code

This is the file structure of the folder called sass-test that I opened in VS Code:

sass-test
|   style.scss
|   _variables.scss

style.scss

@use "variables";

html {
  color: variables.$primaryColor;
}

_variables.scss

$primaryColor: #ff0000;

Live Sass Compiler Output

Open style.scss in a new tab in VS Code. Then, click the "Watch Sass" button located in the bottom right of the window. Live Sass Compiler would output the following error:

Compiling Sass/Scss Files: 
d:\Web Development\sass-test\style.scss
--------------------
Compilation Error
Error: Invalid CSS after "  color: variables": expected expression (e.g. 1px, bold), was ".$primaryColor;"
        on line 4 of sass/d:\Web Development\sass-test\style.scss
>>   color: variables.$primaryColor;
   ------------------^

--------------------
Watching...
-------------------

Sass CLI Output

Open Terminal and run sass --watch style.scss:style.css. The compiler successfully compiles without any errors:

Compiled style.scss to style.css.

Sass is watching for changes. Press Ctrl-C to stop.

Since my code can compile successfully with Sass CLI, does it mean that my code is syntactically correct and it's caused by a bug from the Live Sass Compiler extension?

AnsonH
  • 2,460
  • 2
  • 15
  • 29
  • 4
    Your syntax is totally correct. It's the compiler. It's likely still running on Node Sass, while your CLI already uses Dart Sass. – Simplicius Feb 14 '21 at 07:17
  • Thanks! Just a short question, what is the difference between Node Sass and Dart Sass? Does Dart Sass support the `@use` syntax while Node Sass doesn't? – AnsonH Feb 14 '21 at 07:22
  • 2
    Dart Sass is the maintained version of Sass and recieves all the new features such as `@use`, while Node Sass is depricated and does not. – Simplicius Feb 14 '21 at 08:09
  • 2
    [Here is the official source](https://sass-lang.com/blog/libsass-is-deprecated) for the information provided by Simplicius. – Arkellys Feb 14 '21 at 08:31

1 Answers1

9

I had same/similar problem two days ago.

@use is a new directive introduced in the new official Version 'Dart Sass' and replaces '@import' which is depricated now.

The popular Extension 'Live Sass Compiler' in VS Code is not longer supported by the maintainer for some time. So unfortunately the Sass Version is not updated in that extension...

In VS Code for 'Dart Sass' I found the the Extension 'DartJS Sass Compiler':
https://marketplace.visualstudio.com/items?itemName=codelios.dartsass

Actual I just did a quick testing so I cannot report much about it. But on the first glance it is running well. But as it is another extension you may have to change some settings.

UPDATE

Additional to the above reported exentsion DartJS Sass Compiler with actual SASS version I found an actualised and actual maintained fork of Live Sass Compiler. It has been deep hidden in the searching reuslts. As it is a very popular extension in VS Code here the link to the fork:

https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass

Remark:

I played arround with both extension. Both are doing the job well and have advantages.

'DartJS Sass Compiler' has the additional possibility for more detailed output like information about sass version and watchers. And additional to included SASS version it allows to use your own SASS version if installed to your system or locally to your project. So there is no/less dependency on updates by the maintainer.

'Live Sass Compiler' runs out of the box with included sass version. As it is a very popular extension in VS Code there is a special advantage: it seems it keeps your settings in the old projects running.

I think both are good solutions.

Brebber
  • 2,986
  • 2
  • 9
  • 19