VS Community 2015 Sass Singularity

Question

Is there a possibly way to install sass singularity in VS Community 2015?

Answer 1

I had the same problems and had to do some digging around to find the solution. So I'll explain my steps (This may not be the correct or best way, but it works, I have been using it and adding to it without problems so far over the last week or so).

As a quick aside, visual studio (at least from 2013 onward and certainty 2015, cause that's what I use) does support bower, grunt and gulp as far as I know. I just don't know how to use these systems. So there may be a faster, more robust, and better way to do this.

To save you time later, you will need to follow the steps below to download the Breakpoint library because it seems the singularity library has a dependency on it. But it's the same steps.

1. Go to the GitHub repo and download the repository as a zip file and extract it.

2. In the case of breakpoint go into the stylesheets extracted folder and copy and paste them into a folder you created inside your project.

3. While doing this create another folder and do the same thing with Singularitygs (it has the same stylesheets folder).

4. In your visual studio project click show all files and include both these new folders - this will have the effect of including all the files within them.

5. Goto extension manager and download the free Web Compiler (part of the web essentials toolkit). This gives VS the ability to do all kinds of cool stuff with cool files such as automating the process (without any extra setup) of transforming your SCSS files to CSS. You may need to restart VS after installing it.

6. Finally - create your own .scss file, and at the top add these includes:

   @import '../_breakpoint.scss'; @import '../_singularitygs.scss';

You'll need to use VS intellisense help to ensure you are pointing to the correct folder locations for your setup.

Once they are included you can work away like normal on your .scss using all the new library functionality.

This seems to be the process for installing any .scss / less library in visual studio. But I'm surprised I did not see any info around about how to do it. I had to spend a while digging through the code of all 3, especially web essentials, to figure it out - only to find out that I did not need to even look at the code at all. :)

Hope this helps.