Setup SASS/SCSS compiler on a Windows machine

SASS/SCSS is well-known CSS preprocessor used to write your traditional CSS in a very fast and efficient way. It’s almost same with some extra features like Variables, Mixins, Inheritance(extend), Import and many more features. Basically, SASS helps you manage the CSS part on larger projects very easily.

1) Ruby Installation:

To get it working on your Windows machine – you would require one thing:

-> Ruby Installer

You can find the latest Ruby installer from it’s Official website.

Download Page: https://www.ruby-lang.org/en/downloads/

Once Ruby is installed, run below mentioned commands to install SCSS and Compass gems.

2) SASS/SCSS Installation:

Go to Command Prompt (Start > Run > CMD) (You may require to start it with Administrator rights)

enter: gem install sass

This would initiate the SASS installation, you need to have a working internet connection during this process. Once SASS installation is done, install Compass.

enter: gem install compass

This should install Compass on your system.

Troubleshooting:

If something goes wrong during this installation and you see an error related to Certificate and saying “unable to download…” as shown below:

Run these two commands in the Command prompt:

enter: gem sources -a http://rubygems.org/

If the terminal asks for confirmation, type y to say “yes”

then enter: gem install sass

 

If you faced the similar error while installing Compass, write the compass installation command again in here and let it finish.


If the error is different than above mentioned scenario, checkout other common errors shared by users on Stack Overflow:
http://stackoverflow.com/questions/27278966/error-sass-installation-for-windows

Once installed properly, create config.rb file in your project directory and you are ready to work with SASS/SCSS on your windows machine.

Completely Free HTML/CSS Course for Beginners

Learning a completely new thing may be hard, but not impossible. If you have the right resources and will to learn, you will come-out being a Ninja . I don’t even remember, how I learned HTML/CSS, but now this helps me in earning my daily bread-butter.

If you are looking for a completely free course for learning HTML/CSS, there is this new website called InternetingIsHard. The website has been crafted very beautifully along with clear images and clean code examples. It almost covers all the sections of HTML/CSS and more is yet to come.

Go ahead and enjoy your learning.

Website Link: https://internetingishard.com/

A collection of 180 CSS Linear Gradients

A very useful website for web-developers. WebGradients.com offers a wide range of ready-to-use 180 CSS gradients, which can used in developing websites.

The website looks pretty clean with Gradients appearing in a grid-layout. Look for your desired gradient, click on “Copy CSS”, it adds the CSS code to your Clipboard and then just paste it inside your website code.

Although the code provided by Web-Gradients does not provides the vendor prefixes for the code copied, but by using a website like Auto-Prefixer, you can get those missing vendor prefixes.

The website doesn’t end only there, you also get to use these gradients as a Photoshop/Sketch pack. You need to download it via GumRoad website You can make a good donation on GumRoad to show your support also.

They really have a very beautiful collection of gradients. And 180 is really a very good count. You can download it’s CSS file from GitHub and use it in your projects.

I’ve been looking for this from very long time and now will be using it on all my projects as well.

Web Gradients Link: https://webgradients.com/

P.s.: When I tried downloading the PSD pack, it didn’t work for me, the download button wasn’t working. 🙁