articles

Home / DeveloperSection / Articles / How to Use Sass File

How to Use Sass File

Anonymous User8596 23-Aug-2014

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.

Site.scss
$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

Site.css
body {
  font: 100% Helvetica, sans-serif;
  color: #0ae; }
 
.textbox {
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  border-radius: 7px; }
 
.btn {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px; }

 

Output

How to Use Sass File

Variable

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.

SASS File

CSS File

$btn-color:#0000FF;

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

.btn {background-color: #0000FF; }


Nesting


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.

.navbar

 

SASS File

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 {
  margin: 0;
  padding: 0;
  list-style: none; }
nav li {
  display: inline-block; }
nav a {
  display: block;
  padding: 6px 12px;
  text-decorationnone; }

 if you  want to learn more about sass file ,

 visit official site of sass


Updated 07-Sep-2019
I am a content writter !

Leave Comment

Comments

Liked By