Sass Introduction For Beginners

First of all, this Sass introduction tutorial will explain what is Sass, its basics, and how to use it productively. Firstly, what does Sass stands for? Or What is the meaning of this acronym Sass? Actually, Sass stands for Syntactically Awesome Style Sheets.

Let’s dig deep in Sass and look at its features furthermore.

What is Sass?

 

The list below describes some of the features of Sass language:

  • Firstly, Sass is a further developed style sheet language
  • Secondly, it is a useful CSS extension
  • Also, it is entirely Compatible will all version of CSS
  • Accordingly, it diminishes repetition, consequently, it is a timesaver solution
  • Also, Sass is free of cost and accessible for everyone to use and compile
  • Most Importantly, the Sass file extension is .sass or .scss
  • There is a huge active developer community of Sass and growing further
  • The popular frameworks like bootstrap and foundation use Sass to build the stylesheets

Sass File Extensions:

  1. .sass Extension: This is the older syntax of Sass language and is indent dependent
  2. .scss Extension: The latest syntax is .scss and more nearer to CSS

What is the difference between Sass And CSS?

Normally, the difference between Sass and CSS is truly explained by expert web designers. When they have to build complicated projects and create stylesheets again and again. In that case, Sass plays a vital role and helps magically.

Since it is clear, CSS plays an important role in web designing and has its vivid importance. While designing a website, the stylesheets get larger and larger and it scales more and more according to the size of the website. Actually, CSS allows us to modify and design each and every pixel on the screen. Resultantly, it is impossible to make stylesheets smaller and easily manageable.

In such a condition, Sass comes in handy and does the job for CSS. Sass basically helps in creating large and complex stylesheets in no time. Whenever there is a need to make a stylesheet, the web designer writes code in sass and transpile it in software. This compilation generates the CSS style sheet that can be used in the website-building.

Also, there is a little difference between Sass and CSS, therefore, it is easy to write and maintain Sass code.

Why Use Sass?

Fortunately, Sass is like a best friend for programmers. Specifically, Sass is a preprocessor and creates CSS stylesheets in a programmable way. Usually, CSS is not a programming language. Therefore, Sass comes forward to help in this regard and makes it effortless for developers to produce big stylesheets with ease and effectively. Thereupon, the time to create a stylesheet is marginally diminished due to a lack of repetition in Sass.

Sass Usability Explained With Example

Suppose a web designer has to design a website and the website features four main colors like shown below:

#0f003d
#3300cc
#ad99ea
#333333

As there are a lot of things on the website, that need designing and modification. Therefore, the web designer will have to repeat these hex color codes again and again.

Now, let’s begin the magic of Sass and see what will Sass code look like. Consider the example below:

Example

/*
=====Define variables for above colors =====
*/
$color_1: #0f003d;
$color_2: #3300cc;
$color_3: #ad99ea;
$color_4: #333333;

/*
=====Define variables for above colors =====
*/
.header-wrapper {
  background: $color_1;
}
.primary-menu {
  background: $color_2;
}
.left-sidebar {
  background: $colory_3;
}
.footer {
  background: $color_4;
}

This Sass code is transpired in a software and CSS stylesheet is generated for designing a website.
Whenever, there is a need to change the color scheme on the whole site, just replace that color in Sass and transpile it. All the color values will be replaced with new values.

What is Sass Transpilation and How Does it Work?

A developer should understand that what is transpilation. Usually, the Sass files cannot be employed directly in web designing, just like CSS stylesheets. Because the browsers do not understand it.

Therefore, a transpiler is helpful in this regard and transforms the .sass or .scss files into .css standard stylesheets.

Info:

For your understanding, the transpilation is a terminology that refers to translating one programming language code into another.

Sass Comments

Primarily, Sass has a comment structure similar to CSS comments. The comments help designers to put in helpful information above various blocks of codes as mnemonics. Furthermore, these comments also benefit when there is a need to share the stylesheet with some other person so that he can undoubtedly understand the purpose of the style declarations after that comment.

Sass Comments As Debugging

Accordingly, the comments are also useful when there is a need for debugging. Simply put the comments around the style declarations and omit their function to see the results.

Sass Comments For Documentation Purpose

Moreover, these comments may support in generating documentation of the whole stylesheet. This documentation can be further used in presentations or other purposes.

Moreover, the Sass transpiler does not interfere with the comments and leave them as its.

Example

/*
=====These are the two main font families, that we will use in our entire site building=====
*/
$font_1: "Roboto", sans-serif;        // This font is for headings
$font_2: "Roboto Slab", sans-serif;   // This font is for paragraphs

Sass Comments Types

Basically, there are two types of Sass comments:

  1. /*Comment*/: Sass comments that can span over a number of lines, usually, infinite lines
  2. //: This is the inline Sass comment, and has a scope on a single line only

A brief history of Sass

Originally, Sass was designed by Hampton Catlin and developed by Natalie Weizenbaum as a feature of the HAML markup language. Weizenbaum and Chris Eppstein extended the Sass with Sass script. From that time, a large community is developed and various developers helped in reshaping sass with different functionalities.

Following is the brief information about Sass history:

Official Website: www.Sass-lang.com
Designed by: Hampton Catlin
Developed By: Natalie Weizenbaum, Chris Eppstein
Release Date: November 28, 2006
File Extensions: .Sass, .scss
Extended From: YAML, HAML and CSS
Influenced: Less, Stylus, BootStrap, Tritium
Give Us Your Feedback
OR
If You Need Any Help!
Contact Us