introduction to sass and scss

Nerd, Solutions 

SASS, is the programming language, that focus on improving CSS and web developer efficiency by automate many CSS tags and selection. SASS code must be in the file with .sass or .scss extension. Browsers does not support sass code, so they need to be translated back to normal CSS code using SASS translators.


We can use ruby gem to translate our SASS files. First we need to install that ruby gem in our system, which can be achieved by using this command: Gem install sass.

Also graphical tools are available, that can be used to translate SASS code into CSS code, one of these tools is prepros, which can be found in their website.

SCSS commenting

They are two types of comments in SCSS file. The one will be shown only in SCSS file and the other will be incorporated into the CSS file.

The type of comment that will be incorporated into CSS file is the normal CSS comment: /* comment goes here */

The type of comment that will only be visible to SCSS file is: //comment, which is the type of comment used on other popular programming languages like C, C++, and others.


One important benefits of SCSS is while writing scoping selector. Example: instead of writing repetition like this.

.small_box {width: 50px;}

.small_box p{color:yellow;}

By using SCSS we would write above code like this:

.small_box {

width: 50px;

& p{




Both, these code will achieve the same effect.

SCSS variables

As a programming language, SCSS include variables too. SCSS variables can be useful to store repetitive values. LIke color code, width of element, height of element and others, because SCSS variables can accept any valid CSS property value.


Variables in SCSS are defined by using dollar sign in-front of the name of the variable; code example: $background_color: blue;

And to use the variable we call it by its name.

Code example:

Here the background color will be set to blue, the value of the $background_color variable.

Calculations in SCSS 

As a programming language SCSS allow arithmetic operations like addition, minus, division and other arithmetic operations. This can be useful in calculating height or width of an element on fly based on give values.

Code example:

Here in this example width property will be set to 20px. Because, SCSS is going to multiply 10px by 2 and use the product as the width value.

We can also use this technique with variables too.

Code example:

Here in this example, SCSS will first replace $total_page_width variable with its value and then try to multiply it with 0.5. The returned product will be used as the width value.


We can combine different SASS files into one CSS file while compiling it. We use the @import followed by the name of the file we want to import.

Code example:

This command above will make SASS create a corresponding CSS file with the name and use CSS @import to include the file in CSS code. But if we want to create one CSS file with all the file code combined, we can use this syntax, which will combine all SASS code from two different file in one CSS file.

Code example:

If you notice the only different is the underscore used in the second syntax, SASS engine will include and compile all SASS code into one CSS file. And we must name the file with the underscore.


Semantic is a philosophy where everything is named logically. 


This will clone the attributes from one class or id and adds them to another.

Code example:


.menu_item {

 width: 15px;

 color: blue;

 padding: 5px;



 @extend .menu_item;

 border:1px solid gray;


Here in this example, all property of class .menu_item will be copied to class .small_menu_item. So, class .small_menu_item will have the same style as class .menu_item plus its own style of border with one pixel solid gray.


Mixin is a fragment of SASS that can easily be applied to another selector or we can say that Mixin is the way to define a function in SASS code. Mixin can be used as normal function in other programming languages, Mixins can accept arguments, we can set default arguments values, it can be called in any SASS selector and other normal function operations can also be applied to Mixin.

To define Mixin, all we need to type is @mixin followed by the name of the mixin and then its styling.

When we want to use Mixin we use the statement @include followed by the name of the Mixin we want to use.

 Code example:

@mixin small_box{

color: red;

height: 50px;

width: 100px;

border: 1px solid blue;


 And to use the Mixin we use this syntax:


@include small_box;

font-family: cursive;


In this code .div element will be applied all the styles that are defined in the Mixin small_box.

More advanced Mixin

Mixins can be advanced and complex, because they can accept variables as arguments.

Code example:

@mixin small_box($size){

color: blue;

font-family: cursive;

font-size: $size;


This Mixin can be use like this:

p {

 @include small_box(10px);


When this mixin is translated into normal CSS code, the value 10px will be used as the font-size of the P selector.

We can also define Mixin with the default value in argument.

@mixin box ($size: 20px){

 width: $size;


When this Mixin is used without passing arguments the default value of 20px will be used as the variable size value.


Because SASS is the programming language, it means we can can write control statement. We can write if....else control statement in SASS code, which is called SASS script.

That involves:

@if condition


@else if condition




And the condition must be included inside the Mixin.

@mixin box_color($device){

        @if $device == mobile{

          color: blue;

       }@else if $device == tablet{

         color: orange;


         color: red;



Styles will be applied, when certain condition are met.

This is just an introduction to SASS and SCSS, you can achieve more than this if you dig dipper into the language and it will save you a ton of time, while developing web projects with CSS. The main philosophy behind SASS is DON'T REPEAT YOURSELF (DRY).