What is Sass CSS Preprocessor? Comparison Between Sass and SCSS
Author : Harry 13th Dec 2019
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.
- Requires Minimal Coding – Comparatively, Sass requires very few codes and help the developers to write CSS quickly.
- Rapid Code Compilation – Unlike other preprocessors, you can easily compile your code using Sass command.
- Bigger Developer Community – Sass has a massive ecosystem with a huge number of active developers.
- 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.