Home > DeveloperSection > Articles > How to Use Sass File

How to Use Sass File

0 Comment(s)
 2830  View(s)
Rate this:

How to Use Sass File

In this article I’m explaining about SASS file.

SASS is Syntactically Awesome Style sheets. It's a CSS Preprocessor. It is written in Ruby and distributed by the Ruby package manager, Ruby Gems.Style sheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. SASS lets you use features that don't exist in CSS yet like variables, nesting.

Before you can use SASS you need to setup on your project. Firstly you go install SASS. in this sample I’m install ruby gems.

1. Install Ruby on windows

First Download RubyInstaller from http://rubyinstaller.org/downloads/

Once it’s downloaded double click the file to start the installer.

How to Use Sass File

Select your language

How to Use Sass File

Check the agree to the terms

How to Use Sass File

 then on the install setting check the boxes next to both "Add Ruby executables to your PATH" and "Associate .rb and .rbw files with this Ruby installation".

How to Use Sass File

Click “Install” complete the installation click the finish.


2. Install Devkit

Download DevKit from http://rubyinstaller.org/downloads/ after download double click the file

How to Use Sass File

Click the run and it will ask where to extract the file click the browse button  and select C:\DevKit you will need to create DevKit folder manually.

How to Use Sass File

And click the extract button to extract files.

Now open command prompt enter this code.

1.       Chdir C:\DevKit

2.       Ruby dk.rb init

3.       Ruby dk.rb install

That’s it. You now fully functional ruby and ruby gems.

Check the install ruby gems you type gem –v on command prompt if install gem give the version name of ruby gems if not install ruby gems give the result not found.

You install sass type code gem install sass on command prompt if give the error first time then again type and press enter and install SASS

How to Use Sass File


After download rubygems and SASS then change folder directory on command prompt give the actual path where your project for compile SASS file.

Write SASS code in your SASS file and compile SASS file.

Compile Code: SASS –watch site.scss:site.css

This code is compile site.scss file write code in site.css file.


$font-stack:    Helvetica, sans-serif;

$primary-color: #00ae;


body {

  font: 100% $font-stack;

  color: $primary-color;


@mixin border-radius($radius) {

  -webkit-border-radius: $radius;

     -moz-border-radius: $radius;

      -ms-border-radius: $radius;

          border-radius: $radius;



.textbox { @include border-radius(7px); }

.btn{@include border-radius(5px);}


Compile site.scss file:- sass –watch site.scss:site.css


body {

  font100% Helveticasans-serif;

  color#0ae; }


.textbox {




  border-radius7px; }


.btn {




  border-radius5px; }



How to Use Sass File


Suppose you have more than 100 CSS files in your project and you want to change the button color in the entire project. What you will do is, find and replace in the entire project using Microsoft visual studio, Dreamweaver or eclipse. It will be a tough job if someone has used the button background-color blue, #0000FF or #00F.

In that scenario, variables are useful.

In SASS, we can create a variable for the button color using $ and use it across the website. So if we want to change it, it requires only one change.



.btn {background-color:$btn-color}

CSS File

.btn {background-color#0000FF; }


Hierarchy is an important feature of CSS. However it is a tedious job to maintain a long chain of hierarchy. SASS makes it easier. Child elements are added into parent elements, so that a structure can be easily understood. Hierarchy can be easily maintained in SASS.




nav {

  ul {

    margin: 0;

    padding: 0;

    list-style: none;



  li { display: inline-block; }


  a {

    display: block;

    padding: 6px 12px;

    text-decoration: none;




CSS File


nav ul {



  list-stylenone; }

nav li {

  displayinline-block; }

nav a {


  padding6px 12px;

  text-decorationnone; }

 if you  want to learn more about sass file ,

 visit official site of sass

Don't want to miss updates? Please click the below button!

Follow MindStick