What is Sass CSS Preprocessor? Comparison Between Sass and SCSS

What is Sass?

Sass ( Syntactically Awesome Style Sheets) is a powerful CSS preprocessor scripting language that helps you to work on your stylesheet 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 stylesheet 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.

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.

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 stylesheet, 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

Partials are one of the most powerful Sass features. Partials are more like a portable stylesheet that can be linked to any other stylesheet, 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, 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.

Originally published at https://techaffinity.com on December 13, 2019.

TechAffinity is a technology-driven custom software solutions firm delivering unrivaled solutions to companies ranging from #startups to #Fortune500.