Running SASS behind corporate proxy

NOTE: The steps mentioned below are for windows only. ( Tried from a Windows 7, 32 Bit PC )

Well, shit happens! and it happens quite a lot of times. 

 Node, SASS, gem, everything is awesome, but its just that these thing remain a showcase item inside a corporate proxy as 9 times out of 10, we wont be able to use it because of proxy restrictions.


NB: I dont claim that this is the best way of doing this, neither guarantees that it will wok in all scenarios, ! It worked for me, so I've documented the steps to the best possible extend i can! Dats all..

 I wanted to run sass from command line with node and npm, and faced quite a lot of errors while trying to run several commands. So i went on checking virtually every stackoverflow post regarding the same, trying out virtually every single step in most post comments.
Hook or crook, cry or shout, finally got it working. So just documented the steps in case someone find it useful and shouldn't  have to pull out their hairs like I did.

Rule 1: We need admin rights for a smoother experience.! So make sure we have one before proceeding.

From command prompt, Check if node is installed in the pc.

>> node -v
'node' is not recognized as an internal or external command, operable program or batch file

And we will be greeted with the following message. So lets install node js first.
Go to the NodeJS site  and download the same. Installation is pretty straight forward. No hassles.
Double click and install.
Path given for installation was C:\Program Files\nodejs\

C:\Users\UserName> node -v 
v4.2.6

Thankfully, Node JS installed, ( which is the easier part )

Next we need to download RubyInstaller. You can get it here. Download the installer based on the PC ( 32 bit or 64 bit ) - I downloaded Ruby 2.2.3

While installing, i went ahead with the following setup .

From there onwards, just select the default selected options and move forward.

C:\Users\UserName> ruby -v 
ruby 2.2.3p713 (2015-08-18 revision 51636) [i386-mingw32]

Great! Ruby too is done. What next?

On my personal laptop, these two was enough to install sass via the gem install sass command. But with proxy, it was not good enough. It threw me the below error.

Fine! So be it..
From the ruby-installer link above, download the development kit ( choose 32bit/64 bit accordingly )

I chose the above one for 32bit with Ruby 2.0 above.

Download the same, create a folder with a name of your choice ( rubygem folder here ) in your disk and paste the exe inside that folder.

Now,double click and extract the same inside the folder. From your command prompt, navigate to this folder, and from the command prompt, run the below two commands.

Okay cool!
Now lets set some proxy stuff. From command prompt, run the below 3 commands. Provide the respective user ids, passwords and company proxy and port number as needed.

Done? It would have created a ".npmrc" file in the C:\Users\User path with the above credentials.

Now we need to set the Environment variable.

Go to My Computer > Properties > Advanced Settings > Environment Variables.

Then try running - gem install sass from command prompt.

If unlucky, you might get this error.

Try running the below command once.

Now, try running the same :

Awesome! Here it goes. Dude got downloaded finally!  ( Punches the hands in air ! ) .

Now we can try running sass behind proxy.

I have Brackets as the editor and shown is the bare minimum skeleton setup for the start up.

The css folder is empty, but in our HTML, the link points to styles.css inside the css folder ( which is yet to be created )

The scss folder contains just one scss file which contains a variable containing a background color for body.

 Lets fire the baby! Lets see if it thrusts out of orbit..

Note, we need to navigate to the root of the folder having the project, and from there, the comamnd says, "Hey sass, i will be writing my sass stylesheet from the folder "scss" which contains a styles.scss , you compile the same and give me the output inside the css folder with the name of styles.css."

And also, we would like sass to watch and recompile the same as and when we continue the development, so we ask sass to watch the fils in scss folder and continuously compile the output to the css folder with the provided name. 

In styles.scss we have written only a modest 2 liner.

$bg-color: #004C70;

body{
   background-color:$bg-color;
}

And if we run the index.html by clicking the "Preview" lightning kind of button in Brackets which will run the same from a built in server.

If we check the css folder, there would be a styles.css and a styles.map file once we run sass for the first time.

The background color is indeed the one provided as a variable from sass. The same is compiled into css and rendered in browser! Bingo! Setup done. Now we can unleash the power of SASS, bring in sass frameworks, use compass, or try bourbon, bitters, refill, susy. ! You name it..

If we are working in a project, then its good to have a workflow that can be helpful for the whole team as such, an IDE, and utilize the possibilities of that to the most to write better code with less fuss. One of my favorites ( Along with Webstorm, Sublime Text , Atom ) is Brackets (Freebie!!) and it does offer a plugins which automates the sass compiling so that we keep on writing the code we want, the same gets converted into css automatically, No command prompt headaches, no black screen stuff, nothing. That would be a bit more better considering that once we had the setup done inside IDE, its like fit it and forget it kind of stuff. Lets do our work, and let Brackets take the pain of sass to css conversion.

That, we will cover it in a separate post Here!