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

CSS Tricks with Examples
May 15, 2016
5 (1 votes)
Example of SASS Mixin, Variables, Partials, Inheritance & Nesting Example of SASS Mixin, Variables, Partials, Inheritance & Nesting
5 5 88
FREE Signup to Publish with us | DA 57

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

Nesting improves readability by visually representing the HTML structure, reducing redundancy, and making it easier to manage complex styles. However, over-nesting can lead to overly specific selectors, so it should be used judiciously.

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

Example of SASS Nesting:

SCSS code Output CSS 
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

Variables in SASS allow developers to store reusable values such as colors, fonts, and spacing, making stylesheets more maintainable. In CSS, variables were introduced later (CSS Custom Properties), but SASS has supported them for much longer with broader browser compatibility.

SASS variables are compiled into static values, making them more predictable in older browsers. They also support mathematical operations and can be scoped within selectors, providing greater flexibility.

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:

SCSS code Output CSS 
/*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:

SASS code Output CSS 
@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

SASS inheritance, using `@extend`, allows selectors to inherit styles from another, promoting DRY (Don’t Repeat Yourself) principles. Unlike CSS, where inheritance is limited to native cascading, SASS enables explicit style sharing.

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

Example of SASS Inheritance:

SASS code Output CSS 
.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";

Conclusion

SASS provides significant advantages over traditional CSS with features like nesting, variables, mixins, inheritance, and partials. These tools enhance code maintainability, reduce redundancy, and streamline development workflows. While CSS is essential for web styling, SASS’s advanced functionalities make it a powerful extension for modern developers. By leveraging these features, teams can write cleaner, more efficient, and scalable stylesheets.

Tags:, , , , ,