SASS Preprocessing

Features of SASS

Some of the amazing features of SASS are:

Variables in SASS

Variables are used to store data that you want to reuse throughout your stylesheet. You can store data like colors, font stacks, or any Cascading Style Sheets value you think you'll want to reuse. SAAS uses the $ symbol to make something a variable. If that value ever changes, you only have to update one line of code. 

SCSS Syntax:

$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
  font: 100% $font-stack;
  color: $primary-color;
}

SASS Syntax:

$font-stack: Helvetica, sans-serif
$primary-color: #333
body
  font: 100% $font-stack
  color: $primary-color

CSS Syntax:

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

Nesting in SASS

Nesting is probably the most fun and the most dangerous part of Sass.

Using the nesting method, you can massively reduce the amount of code. Sass will let you nest your Cascading Style Sheets selectors in a way that follows the same visual hierarchy of your HTML. Both technologies follow the same visual order. But remember one thing nesting will over-qualify your CSS that can prove hard to maintain and is generally considered bad practice.

SCSS Syntax:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
 
  li { display: inline-block; 
  }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

SASS Syntax:

 nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block
    
  a
    display: block
    padding: 6px 12px
    text-decoration: none

CSS Syntax:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Partials in SASS

Partials is one of the most powerful Sass features. This is more like a portable style sheet that can be linked to any other style sheet, and you can use it in another Cascading Style Sheets file. Partials help you to make your code transportable and easy to maintain. The name of the partials file should start with an underscore. 

You can name it something like: _emample.scss. 

Modules in SASS

As discussed in the previous section, you don't have to write all your Sass code in a single file. Using @use rule, you can use some other sass files in your current sass file. This rule loads another Syntactically Awesome Style Sheets file as a module, which means you can refer to its variables, functions, and mixins in your Sass file with a namespace based on the filename. Each import will generate a new HTTP request, and too many HTTP requests will slow down your website. 

SCSS Syntax:

// _example1.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

 
body {
  font: 100% $font-stack;
  color: $primary-color;
}
 
 
// example2.scss
@use 'base';
 
.inverse {
  background-color: base.$primary-color;
  color: white;
}

SASS Syntax:

// _example1.sass
$font-stack: Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color


// example2.sass
@use 'base'

.inverse
  background-color: base.$primary-color
  color: white

CSS Syntax:

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

.inverse {
  background-color: #333;
  color: white;
}

Mixins in SASS

A mixin lets you make groups of Cascading Style Sheets declarations that you want to reuse throughout your site(it helps you convert the long-winded code into a concise one). Instead of using Cascading Style Sheets, you can use the mixin feature from Sass to avoid writing the code repeatedly. To make your mixin flexible, You can even pass in values.

SCSS Syntax:

@mixin theme($theme: DarkBrown) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

 
.info {
  @include theme;
}
.alert {
  @include theme($theme: DarkBlue);
}
.success {
  @include theme($theme: DarkYellow);
}

SASS Syntax:

@mixin theme($theme: DarkBrown)
  background: $theme
  box-shadow: 0 0 1px rgba($theme, .25)
  color: #fff
 
.info
  @include theme
 
.alert
  @include theme($theme: DarkBlue)

.success
  @include theme($theme: DarkYellow)

CSS Syntax:

.info {
  background: DarkBrown;
  box-shadow: 0 0 1px rgba(101, 67, 33, 0.25);
  color: #fff;
}
 
.alert {
  background: DarkBlue;
  box-shadow: 0 0 1px rgba(0, 0, 139, 0.25);
  color: #fff;
}

.success {
  background: DarkYellow;
  box-shadow: 0 0 1px rgba(155, 135, 12, 0.25);
  color: #fff;
}

Extended/Inheritance in SASS

The @extend is usually called among powerful Sass features. Using @extend lets you share a set of Cascading Style Sheets properties from one selector to another. And so, the element that we extend it to would then inherit all the style from the selected element.

For example, we will create a simple series of email for warnings, errors, and successes using another feature that goes hand in hand with extended placeholder classes. A placeholder class is a particular type of class that only prints when extended and can help keep your compiled Cascading Style Sheets neat and clean.

SCSS Syntax:

/* This Cascading Style sheet will print because %email-shared is extended. */
%email-shared {
  border: 2px solid #ccc;
  padding: 11px;
  color: #666;
}

// This Cascading Style sheet won't print because %equal-heights is never extended.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.email {
  @extend %email-shared;
}

.success {
  @extend %%email-shared;
  border-color: blue;
}

.error {
  @extend %email-shared;
  border-color: orange;
}
 
.warning {
  @extend %email-shared;
  border-color: yellow;
}

SASS Syntax:

/* This Cascading Style sheet will print because %email-shared is extended. */
%email-shared
  border: 2px solid #ccc
  padding: 10px
  color: #666

 
// This Cascading Style sheet won't print because %equal-heights is never extended.
%equal-heights
  display: flex
  flex-wrap: wrap

.email
  @extend %email-shared
 
.success
  @extend %email-shared
  border-color: blue

.error
  @extend %email-shared
  border-color: orange

.warning
  @extend %email-shared
  border-color: yellow

CSS Syntax:

/* This Cascading Style sheet will print because %email-shared is extended. */
.email, .success, .error, .warning {
  border: 2px solid #ccc;
  padding: 11px;
  color: #666;
}

.success {
  border-color: blue;
}
 
.error {
  border-color: orange;
}
 
.warning {
  border-color: yellow;
}

Operators in SASS

From the name, you can easily tell what’s this about. Doing math in your Cascading Style Sheets is very helpful. Syntactically Awesome Style Sheets has a handful of standard math operators like +, -, *, math.div(), and %. With the help of mathematical operators, you can perform calculations and use the final results in your compiled CSS file. 

In this example, we will do some simple math to calculate widths for an article and aside.

SCSS Syntax:

@use "sass:math";


.container {
  display: flex;
}


article[role="main"] {
  width: math.div(600px, 960px) * 100%;
}


aside[role="complementary"] {
  width: math.div(300px, 960px) * 100%;
  margin-left: auto;
}

SASS Syntax:

@use "sass:math"

.container
  display: flex

article[role="main"]
  width: math.div(600px, 960px) * 100%


aside[role="complementary"]
  width: math.div(300px, 960px) * 100%
  margin-left: auto

CSS Syntax:

.container {
  display: flex;
}

article[role="main"] {
  width: 62.5%;
}

aside[role="complementary"] {
  width: 31.25%;
  margin-left: auto;
}

Frequently Asked Questions

1.  What is a preprocessor in SASS?
   Ans: Syntactically Awesome Style Sheets (Sass) is a powerful CSS preprocessor scripting language that adds special features like mixins, variables, nested rules and  into regular Cascading Style Sheets. The objective is to make the coding process more effective and simpler. 
    
2. Does SASS supports inline comments?
   Ans: In Syntactically Awesome Style Sheets, 
   Single line comments // will be taken out by the .scss pre-processor and won't appear in your .css file.
   Multiline comments */ are valid CSS, and will be preserved* between the translation from .scss to your .css file.
    
3. What are some main disadvantages of SASS?
   Ans: The following disadvantages of SASS are:
   SASS introduces some new features, the developer must have enough time to learn new features present in this preprocessor before using it.
   If a team works on the same project, they will use the same preprocessor. If some team members use the SASS and some use the Cascading Style Sheets to edit the files directly, it will become a tough task to work with the project.
   The code has to be compiled.
   The troubleshooting is complex in SASS.
    
4. What are the different color channel functions used in LESS?
   Ans: These are some different color channel functions used in LESS:

• saturation
• hue
• lightness
• hsvhue
• hsvsaturation
• red
• green
• blue
• alpha
• luma
• luminance

Key Takeaways

In this blog, we discussed preprocessing in syntactically awesome style sheets and their features like variables, Nesting, Partials, Modules, Mixins etc. We have also discussed their syntaxes.

If you are pursuing a new career in Web Development, we suggest you get your fundamentals crystal clear with our Full Stack Development course. 

Happy Learning, Ninja!

This course will help you!