What is Sass CSS Preprocessor? Comparison Between Sass and SCSS

What is Sass CSS Preprocessor?

Sass (Syntactically Awesome Style Sheets) is a powerful CSS preprocessor scripting language that helps you to work on your style sheet much faster than ever. Sass allows you to use features such as variables, nestings, modules, etc. that don’t exist in CSS. Apart from Sass, there are two other important CSS extensions – Stylus & LESS (Leaner Style Sheets).

Also, with the help of Sass, you can improve DRY (Don’t Repeat Yourself) CSS and make your code more readable. Additionally, it is also totally compatible with all versions of CSS. Once you get familiar with Sass, you will feel more comfortable and easy to handle large scale projects. To play around with Sass CSS preprocessor, you have to create a separate style sheet with the extensions “.scss” or “.sass”. You can then compile it into a normal CSS file. Your browser will read only the finally compiled CSS file to style your website/web application.

Benefits of Using Sass CSS Preprocessor:

Below are some of the benefits of using Sass.

1. Requires Minimal Coding – Comparatively, Sass requires very few codes and help the developers to write CSS quickly.
2. Rapid Code Compilation – Unlike other preprocessors, you can easily compile your code using Sass command.
3. Bigger Developer Community – Sass has a massive ecosystem with a huge number of active developers. 
4. Powerful Frameworks – Sass uses Compass for mixins, which contains almost all possible options, including updates for future support.

Also Read: Why you Should use “Less” CSS Preprocessor?

Types of Sass Syntaxes:

Sass can be written in two ways .scss and .sass. Both have their unique syntaxes.

• SCSS (New): SCSS is commonly called as Sassy CSS. You can save it with .scss extension. It is a superset of CSS, which means it contains all the features that CSS holds. Also, you can easily adapt yourself to SCSS if you are familiar with the basics of CSS.

• Indented Syntax (Old): Indented Syntax can be implemented on style sheet with the .sass extension. When compared to .scss, the indented syntax has a wider audience because it helps you to write code quickly and concisely. Indented syntax use indentation to describe the format of the document; whereas, .scss uses curly brackets and semicolons. Below is an example of an indented syntax:

Indented

$red: #FF0000
$margin: 10px

.content-navigation
  border-color: $red
  color: darken($red, 9%)

.border
  padding: $margin / 2
  margin: $margin / 2
  border-color: $red

SCSS

$red: #FF0000;
$margin: 10px;

.content-navigation {
  border-color: $red;
  color: darken($red, 9%);
}

.border {
  padding: $margin / 2; margin: $margin / 2; border-color: $red;

}

CSS

.content-navigation {
  border-color: #FF0000;
  color: #d10000;
}

.border {
  padding: 5px;
  margin: 5px;
  border-color: #FF0000;
}

How to Use Sass Features Effectively

As we now know what Sass CSS preprocessor is and it’s the syntax, let’s see various Sass features that make it so robust.

• Variables

Sass enables you to use variables to store values, and you can use it wherever you need it. For instance, you can store a specific color in a variable at the top of your style sheet, and call the respective variable wherever you want to apply that color.

Sass

$font-family: raleway, sans-serif
$font-color: #EF592B

body
  font: $font-family
  color: $font-color

Scss

$font-family: raleway, sans-serif;
$font-color: #EF592B;

body {
  font: $font-family;
  color: $font-color;
} 

CSS

body {
  font: raleway, sans-serif;
  color: #EF592B;
} 

• Nesting

Using the nesting method, you can reduce the amount of code massively. The nesting structure in Sass is somewhat similar to HTML. Both technologies follow the same visual hierarchy. But, keep in mind that nesting will over-qualify your CSS if you didn’t execute properly.

Sass

$font-family: raleway, sans-serif
$font-color: #EF592B

body
  font: $font-family
  color: $font-color

Scss

$font-family: raleway, sans-serif;
$font-color: #EF592B;

body {
  font: $font-family;
  color: $font-color;
}

CSS

body {
  font: raleway, sans-serif;
  color: #EF592B;
}

• Partials

It is one of the most powerful Sass features. Partials are more like a portable style sheet that can be linked to any other style sheet, and you can use it in another CSS file. It helps you to make your code transportable and maintain it easily. Remember, the partials file name should start with an underscore: _example.scss. You will get a clear picture of the partials below.

• Modules

As discussed in the previous section, you can use some other sass files in your current sass file using @use rule. It lets you incorporate multiple .sass files into your project file. Also, keep in mind that each import will generate a new HTTP request. Too many HTTP requests will result in the slow down of your website.

Sass

// example1.sass
$font-family: raleway, sans-serif
$color: black

body
  font: $font-family
  color: $color


.// example2.sass
@use 'example1'

.slider
  background-color: example1.$color
  color: white

Scss

// example1.scss
$font-family:    raleway, sans-serif;
$color: black;

body {
  font: $font-family;
  color: $color;
}

// example2.scss
@use 'example1';

.slider {
  background-color: example1.$color;
  color: white;
}

CSS

body {
  font: raleway, sans-serif;
  color: black;
}

.slider {
  background-color: black;
  color: white;
}

• Mixins 

The main reason for using preprocessors is it helps you convert the long-winded code into a concise one. That’s exactly where mixins come in. For instance, while working on vendor prefix on CSS, you will be spending more time than usual. Instead of using CSS, you can use the mixin feature from Sass to avoid writing the code again and again.

Sass

=transform($property)
  -webkit-transform: $property
  -ms-transform: $property
  transform: $property
.box
  +transform(rotate(45deg))

Scss

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { @include transform(rotate(45deg)); }

 CSS

.box {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

•  Extend/Inheritance

The @directive is usually called as the most powerful Sass features. You can use a group of CSS properties from one selector to another using @directive. This implies that you don’t have to use multiple class names. All you have to do is, write a set of CSS properties that will repeat in your program over and over and give it a name. Then, wherever you want to apply those styles, include it using @directive.

Sass

/* This CSS will print because %email-shared is extended. */
%email-shared
  border: 1px solid #ccc
  padding: 15px
  color: #EF592B


// This CSS 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: green


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



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

Scss

/* This CSS will print because %email-shared is extended. */
%email-shared {
  border: 1px solid #ccc;
  padding: 15px;
  color: #EF592B;
}

// This CSS 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: green;
}

.error {
  @extend %email-shared;
  border-color: red;
}

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

CSS

/* This CSS will print because %email-shared is extended. */
.email, .success, .error, .warning {
  border: 1px solid #ccc;
  padding: 15px;
  color: #EF592B;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: orange;
}

• Operators

From the name itself, you can easily find what’s this about. Operators deal with basic math operators such as +,-,*,/, etc. Operators deal with basic math operators such as +,-,*,/, etc. With the help of operators, you can perform calculations and use the final results in your compiled CSS file. Instead of following the process of old-fashioned pixels, you can use operators for complex calculations.

Sass

.container
  width: 80%


article[role="main"]
  float: left
  width: 500px / 900px * 100%


aside[role="complementary"]
  float: right
  width: 250px / 900px * 100%

scss

.container {
  width: 80%;
}

article[role="main"] {
  float: left;
  width: 500px / 900px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 250px / 90px * 100%;
}

 CSS

.container {
  width: 80%;
}

article[role="main"] {
  float: left;
  width: 55.55555556%;
}

aside[role="complementary"] {
  float: right;
  width: 277.77777778%;
}

Thus, with Sass CSS preprocessor, you can refrain yourself from writing lengthy codes over and over again, and simplify the front-end development process. As a result, when you take the complete advantage of Sass CSS preprocessor, you can reduce the time taken to develop and finish off your project quickly.

As the experts at TechAffinity’s front-end development team have hands-on experience in various CSS preprocessors, the pace of web app development is relatively high. Feel free to drop your queries at media@techaffinity.com or get in touch by scheduling a meeting.

Harry Harry is an energetic professional fueled by a burning passion for propelling business growth and utilizing digital marketing as a catalyst for success. His exceptional fusion of business development acumen and expertise in digital marketing empowers him to craft innovative strategies that drive outstanding results.