Example of SASS Mixin, Variables, Partials, Inheritance & Nesting

Technology updates everyday. I am a UI developer, first time when I heard about SASS I started searching in Google to know “What is SASS?”. Off course I am an expert in CSS but how SASS is different from CSS? What are the advanced feature SASS provides compare to CSS? When CSS is here why SASS is introduced? Like plenty of queries I have at the Starting. Then I explore few advanced features of SASS such as SASS Mixin, SASS Variables, SASS Partials or SASS Nesting. In below sharing all those experiences with Example of SASS features.

The full name of SASS is “Syntactically Awesome Stylesheets“. It is a CSS extension language in run-time which is compiled into CSS. Large style sheets can easily maintain by SASS. SCSS is one of two syntax’s of SASS which uses block formatting like CSS. The extension for SASS file is .scss.

Steps to install SASS

To Getting Started with SASS, we need to install it first. Installer version of SASS is SASS gem. In Windows Operating System to run SASS we required Ruby at a min.

From Command line to install Sass gem run the following Command:

gem install sass

During installation if you found downloading issue, you can download the setup file manually from https://rubygems.org/gems/sass.

To run SASS from command line:

sass input.scss output.css

Sass can watch the changes in the Sass file and update the CSS using the following Command:

sass –watch input.scss:output.css

Advanced Features of SASS

Sass has introduced the following advanced features:

• Nesting
• Variables
• Mixin
• Inheritance
• Partials

SASS Nesting

In SASS we can able to nest selectors in the same hierarchy as of HTML.

Example of SASS Nesting:

ul {
list-style: none;
li {
display: inline-block; 
a {
padding: 15px 20px;
}
}
}

ul {
list-style: none; }
ul li {
display: inline-block; }
ul li a {
padding: 15px 20px; }

SASS Variables

Using SASS it can possible to store any CSS values to variables. Variable name begins with a dollar($) sign and assignment uses a colon (:). We can do arithmetic operations to variables also.

Example of SASS Variables:

/*Sass Variables*/
$font-normal: Arial, Verdana;
$primary-color: #DDDDDD;
/*Class*/
body {
font-family:  $font-normal;
background: $primary-color;
}

body {
font-family:  Arial, Verdana;
background: #DDDDDD; }

SASS Mixin

In SASS using Mixin technique we can define styles & the same styles can re-used throughout the stylesheet. To make more programmer friendly we can also pass arguments to Mixin.

Example of SASS Mixin:

@mixin border-radius($value) {
-webkit-border-radius: $value;
-moz-border-radius: $value;
-ms-border-radius: $value;
border-radius: $value; }

.button { 
@include border-radius(12px); 
}

.button {
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
-ms-border-radius: 12px;
border-radius: 12px; }

SASS Inheritance

Using @extend selector in SASS we can inherit the styles from an another selector.

Example of SASS Inheritance:

.color-yellow {
color: #fc0;
}
.button {
@extend .color-yellow;
}

.color-yellow, .button {
color: #fc0; }

SASS Partials

To made modularization easy SASS introduced partial SASS files technique. A partial SASS file is named with a leading underscore, like _tempvariables.scss. This file is not converted to a CSS file. But we can import partial SASS files with the @import directive.

Example of SASS Partials:

@import "tempvariables";
@import "modules";