How can I use the Sass CSS preprocessor in Visual Studio 2013? Are there any extensions that provide support for Sass?
Yes, we can compile SCSS/SASS to CSS without using any Node Command.
Visual Studio 2013 Update 2 has native syntax support for both SCSS and LESS files. You can create SCSS or LESS files and see syntax highlighting and intellisense for these file types. It does not however provide a method of compilation.
Here's a link to the blog explaining about the new features:
We added LESS in VS2013 RTM, and we now have a SASS project item and editor. SASS editor features are comparable to LESS editor, include colorization, variable and Mixins IntelliSense, comment/uncomment, quick info, formatting, syntax validation, outlining, goto definition, color picker, tools option setting etc.
Please note: This update seems to support the newer SassyCSS syntax only. I've tried getting it to work with the older indented SASS syntax without any success.
For those of you moving to Visual Studio 2015, unfortunately there is still no native support for SASS and LESS compilation. And unfortunately Web Essentials will no longer be supporting compilation either. The author of Web Essentials (Mads Kristensen) explains the reason for this decision here.
Here are a list of extensions that can handle compilation:
WebCompiler (FREE)
Mads Kristensen (the author of web essentials) has created a standalone compilation tool called Web Compiler. All you have to do is install it, then right click on any of the SASS files you want to compile and select Web Compiler > Compile File. From that point on it is watched and anytime it is saved, the file will be compiled.
Download Web Compiler
CompileSASS (FREE)
Similar to Web Compiler this is a standalone extension that was created to work in both VS2013 and VS2015 because compilation was removed from the popular Web Essentials extension. It's lightweight and does the job very well with great error reporting. Read the author's blog about the extension here.
Download Compile SASS
Web Workbench (FREE/PAID)
Mindscape's Web Workbench was my favourite extension for many years when compiling SASS but I have since moved away in favour of the free alternatives. Still, the Pro version is a powerful tool with many ways to customise the outputted files but it is also quite expensive ($39) considering there are free tools out there.
Download Web WorkBench
Same deal as above really, it has native support for SASS and LESS through syntax highlighting and Intellisense but lacks compilation.
Any of the compilers outlined above will work but if you wanted to set up compilation manually here is a brilliant guide:
https://code.visualstudio.com/Docs/languages/css
For anyone else looking for an answer to this, I'm posting to save you time as some of the answers are a little out of date.
Whilst working on a small web project in Visual Studio 2013, I wanted to use SASS for the first time. I did some digging and discovered VS 2013 Update 2 was released with native support for SASS (.scss
) files.
After a bit more digging, and with no experience of using SASS, I installed Web Essentials 2013 for Update 2 that is used to compile and generate the corresponding .css
files.
Even still, I wasn't clear on how it all tied together, but this blog post did a great job of explaining everything for a first timer.
Snippets From Blog (Credit to @akatakritos)
.scss
) .scss
file to your project, e.g. styles.scss
styles.scss
, save, and it will auto generate a styles.css
file under the .scss
file.css
fileIn a later Web Essentials update, namely: Version 2.5 for Update 4 Nov 12. 2014, the SASS compiler has been removed.
Alternate compilers:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With