Sass CSS Tutorial for beginners

Sass stands for  Syntactically Awesome Stylesheet

File extension for a Sass file is “.scss”,  which stands for Sassy CSS. “.sass” is also a valid extension for Sass with bit concise syntax.  In this article, we will only look at the latest version which is SCSS.

Why Sass?

Sass is a preprocessor that gives you a little better way of writing styles where you can have features such as nesting that are missing from CSS. In nutshell, you can write a sort of object-oriented styles by using Sass. Sass compiler converts “.scss” files to “.css” files. Since you do not need to edit CSS files directly,  you can avoid some of the mess that CSS files may create.

Code Example

[Look at the SCSS example below. Click the SCSS tab to see the SCSS code, and then from the lower-right, click View Compiled. This way, you can toggle between SCSS and compiled CSS]

The following SCSS has an ID called main, and within that there are two nested elements a and h2.  When you click View Compiled, it produces CSS that creates a style for each element. This is a basic example of how SCSS works. You can modify the example and check the result in the Result tab.


See the Pen Flat minion by Hemil Patel (@codepatel) on CodePen
1

Comments

There is a need for writing Sass specific comments that describes some of the rationals which is called Sass comments. When Sass compiler compiles down to normal CSS, the comments mentioned in Sass do not carryover to CSS.

Sass  comment :   // This is Sass Comment [Note: This is not valid in CSS]

CSS comment :  /* This is CSS Comment with opening and closing */


See the Pen Flat minion by Hemil Patel (@codepatel) on CodePen
1

Variables

Variables are very useful features of Sass.  For example, you can define a variable for a color and use it for various styles. The advantage is that when you have to replace a color with a new color, you do not need to change the color throughout the style. You only make a change to the variable value. To define a variable, add a prefix $.  See the example below.

$hcolor = red;

h2{

color: $hcolor;

}


See the Pen Flat minion by Hemil Patel (@codepatel) on CodePen
1

One thought on “Sass CSS Tutorial for beginners”

  1. Love this intro to Sass. WHat is the diffrence between Sass and Scss. and which one should i use?

    Thanks
    Jay

Leave a Reply

Your email address will not be published. Required fields are marked *

mycap *