6

Until now i use Web Compiler by Mads Kristensen but now i'am facing problems compiling new sass commands like @use or using some css calculation like

grid-template-columns:repeat(auto-fill,minmax(max(200px,(100% - (var(--n) - 1)*10px)/var(--n)),1fr));

i found a new implementation of sass: Dart Sass but don't find any extension to manage it in visual studio, only some for visual studio code

Web compiler last update was in 2018

i try also Sass compiler but get same compilation error:

200px,(100% - (var(--n) - 1)*10px)/var(--n) was not a correct value for max

even if it's pure working css, maybe it's too new and compiler does not recognize it

only way for now is to put that rule in pure css file and import it along with css generated by sass but don't seem a good solution

gt.guybrush
  • 1,320
  • 3
  • 19
  • 48
  • You could temporarily use npm to build your scss files, integrate it with Visual Studio's task runner, but you will still get warnings in Visual Studio, because it is not supported – Liero Jul 20 '21 at 13:14
  • Please vote for Visual Studio sass-dart support here: https://developercommunity.visualstudio.com/t/Dart-SCSS-Support-Request/1388380 – Liero Jul 20 '21 at 13:16

3 Answers3

2

sass dart is not supported in visual studio yet.

Please, vote for the sass dart support here:

https://developercommunity.visualstudio.com/t/Dart-SCSS-Support-Request/1388380

You can use npm package to build your scss files using sass dart, and either npm scripts or a javascript to integrate with visual studio's task runner, but you will still get the syntax errors in Visual Studio's code ditor.

Liero
  • 25,216
  • 29
  • 151
  • 297
0

You can install dart-sass by command line: npm i dart-sass sass-watch

then define a task by gulpJs --> Install gulpJs

Hossein Azizdokht
  • 748
  • 3
  • 17
  • 1
    Have you managed to get rid of syntax errors in Visual Studio when editing SASS files? – Liero Jul 27 '21 at 08:26
  • Yes, when I updated Visual Studio to 2019 my sass files had error on compile. So I uninstalled all sass packages and reinstalled them by npm. – Hossein Azizdokht Jul 27 '21 at 08:31
  • Please, mention it in your answer + share your gulp.js and package.json. I will award the answer – Liero Jul 27 '21 at 14:20
  • as Liero if you add more detail i will mark as accepted answer. moreover actually i don't use npm or gulp in actual project: only visual studio tool to add client library – gt.guybrush Jul 27 '21 at 14:45
-1

Update
The suggested extensions in this answer are not running in Visual Studio but in Visual Studio Code only. So the suggested solutions in this answer does not work as asked in the question. Thx to feedback of @gt.guybrush to clarify that!

To use @use are only included to the most acutal compiler extensions.

Maybe you like to try:
https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass

Or with this version you can use your own SASS installation on your system:
https://marketplace.visualstudio.com/items?itemName=codelios.dartsass

More about the situation:
Live Sass Compiler - @use causes compilation error

Brebber
  • 2,986
  • 2
  • 9
  • 19
  • both are for visual studio code, not for standard visual studio i'am using – gt.guybrush Mar 13 '21 at 14:43
  • Oh sorry. Thought that's the same marketplace and the extensions are running as well in the bigger package. I will mark it in the answer. – Brebber Mar 13 '21 at 15:06
  • let's say i can survive without @use, now main problem is calculation in max function, any idea to bypass it? – gt.guybrush Mar 13 '21 at 19:09
  • Not really. It's same problem: rule `@use` and function `max` are both introduced with Dart Sass. Most compiler are still not updated yet... If possible you can use original SASS for the project (it is not as complicated to install). Or code the the max-calculations on your own. But a question: is it possible that you throw SASS variables with CSS-Calculations together? If you want to calulate something in SASS you cannot use percentage values and even not css calc(...) functions or css vars. That would throw an error even you use Dart Sass. (Just possible feedback, I am not sure about it!) – Brebber Mar 13 '21 at 22:27
  • calc seem working: https://www.geeksforgeeks.org/how-to-calculate-percent-minus-px-in-sass/ – gt.guybrush Mar 15 '21 at 07:57
  • to solve max solution is to override sass own function, credits: https://stackoverflow.com/questions/55535307/sass-create-function-to-do-max-and-min-on-margin – gt.guybrush Mar 15 '21 at 07:58
  • Great you found the solution. Good way! Just to avoid misunderstandings: that means not using functions in/off SASS so you would have a value you are able to operate with in SASS itself. That is using SASS to write CSS code with output of CSS function. (The calculations of `calc(...)` and `max(...)` are done in the browser, not in the SASS compiler.) I like this 'mixed up technique' and as I see this technique becomes more and more popular writing complex CSS :-) – Brebber Mar 15 '21 at 09:00