Sass to CSS compile by using Ruby Installer

Hi friends! We have come with a new blog on SASS. I assume that you have heard of SASS. If not please let us explain about SASS.

SASS is a powerful and stable CSS preprocessor. It has been widely using language in today's time. Bootstrap itself uses this preprocessor language of its latest version. There are more CSS preprocessor like LESS, but SASS is very popular preprocessor related to CSS.

The extension of SASS is .sass .

Before we start we need to know our requirements first

• Install Ruby Installer
• Install SASS in our system
• Compile SASS to CSS

Install Ruby Installer

For Ubutu users:

If you are a user of Ubuntu, you have to install Ruby through the apt package manager or rvm. Then you have to type the following command in the Terminal.

Type => sudo gem install -no-user-install

For Mac OS users:

As SASS has Ruby dependency but if someone uses Mac OS then they should not to do anything as because Ruby comes pre-installed.

For Windows users:

Go to https://rubyinstaller.org/downloads/ to download Ruby Installer. Download the file as per your machine configurations. Our system is 32 bit, we are going to install Ruby 2.5.1-1 (x86).

If you want to know more about Ruby Installer, please refer to the above mentioned url as a reference.

As we are Windows users, we will show you the full process of compiling SASS to CSS in Windows system through out the blog.

Install the application in your Windows machine

Open Terminal or Command Prompt to install SASS

If you are using Ubuntu/Mac, open the Terminal from "Utilities" folder or if you are Windows user open Command Prompt using "cmd", where we have to install SASS.

Ruby comes with gems to manage its various packages of codes like SASS. 

Type => sudo gem install sass (for Ubuntu & Mac OS)

Type => gem install sass (for Windows)

You will be shown several installation messages in command prompt.

Ok now you have installed SASS successfully. You can check for the version of sass by typing
sass -v (It will show the version of SASS in the command prompt/terminal)

That's it. We have successfully installed SASS by Ruby installer and gem package manager.

Move to project folder and compile sass to css

We will move to our project folder using command prompt. In my case my folder name is sass-demo.

We will create a file with .sass extension into sass-demo folder (as an example).

In the command prompt we will type =>

sass custom.sass style.css

Now if we look into our project folder structure, we can see some files have generated by the command.

All these files are supported files including map files. Along with that we can see a style.css file have created where the pure css codes will be generated from custom.sass file.

We will run a watcher here. If some changes happen in custom.sass file, css will be generated instantly in the style.css file.

Type => sass --watch custom.sass:style.css

custom.sass

Now, we will try to change the custom.sass file by writing sass.


$font-stack:    Helvetica, sans-serif
$primary-color: #333
$danger: #ff0000

body
  font: 100% $font-stack

  color: $primary-color
h1
  color: $danger

style.css

Save custom.sass file, a fresh css styles have generated in style.css from this sass file.

Link style.css to index.html

If we link the style.css file with index.html page, all styles will be then accessible from sass file like the following.

Open the file in any browser to see the effect of our generated sass styles.

That's it. We have successfully compile css from sass. Hope you like it. Please share with every one for a better technical future. Thanks!