SASS

Introduction Conversion (SASS → CSS)SASS vs SCSS Setup Parcel Setup SCSS Features Nesting Variables Imports Partials @use Mixins Inheritance Extending a class Extending a Placeholder %Functions

Introduction

Please refer to the original documentation here

SASS is a CSS Pre-processor or more powerful CSS (CSS on Steroids 💉)

It tries to bring in many programming features to our plain CSS (such as functions)

SASS was made in 2006, at a time when many of the CSS features that we have today didn’t exist. But now, even CSS3 is powerful enough so using SASS is debatable

Many great frameworks such as Bootstrap or Bulma are powered by SASS, so learning sass won’t hurt

There are also other alternatives to SASS such as LESS

For fresh projects it’s recommended to start with a more modern approach like Tailwind

Conversion (SASS → CSS)

Converting SCSS code back to CSS so that browsers can understand

A browser can never understand sass code and only renders CSS

Converting from one language to another is called as Transpiling

To convert our scss code to css we can either use the official sass compiler (from NPM) or a build tool such as Parcel

Using Parcel is recommended as it allows us to link our SASS file directly with HTML while also performing several optimizations at build (like compression)

SASS vs SCSS

SASS actually supports two syntax, the one is .sass and the other one is .scss

The sass syntax is indentation-based (more like Python) and the scss is like css (with brackets and curly braces)

The .scss one is what we use as it is a superset of CSS and all the CSS features are already supported

Setup

There are multiple ways to compile sass into css. We are focusing on mainly two:

Using the official SASS CLI tool from NPM

Using a bundler like Parcel which internally relies on the same cli tool

Parcel Setup

Here are the detailed steps for SASS setup using Parcel

Initialize npm with this command. This will generate a package.json file

Install Parcel as a dev dependency. This will install it in the node_modules folder

Now add these scripts in your package.json file. We will use npm start command while in development mode and give npm run build command while deploying at host

Now go-on and create index.html and style.scss file and link them together. To run parcel we can use npm run start. Now parcel will automatically install all the required SASS dependencies

Now create a .gitignore file to ignore all the directories we don’t need Git to track. These directories are create by Parcel or use a pre-built one here


/node_modules
/.parcel-cache
/dist

Deployment: Now as we have ignored /dist folder we need to add these configs in our Netlify deployment so that it builds our site before deploying. (Otherwise SASS won’t get converted to CSS)

The site will now be live and the build will also be compressed and minified thanks to Parcel 🥳

SCSS Features

Nesting

In sass we can nest our selectors in the same way they are defined in our markup

We don’t need to use descendant selector or child selector for this

We can also use & to target a pseudo class


header {
	.logo {
		width: 120px;
	}
	
	ul {
		list-style: none;
		}
}

h1 {
	font-size: 20px;
	
	&:hover { // State 
		font-weight: black;
	}
}

Variables

Sass variables are defined using $ and also used in the same way. To define them we don't need to go inside :root like in CSS


$color-grey: #0a0a0a;

body {
	background-color: $color-grey;
}

Imports

We can use @import just like in CSS but with CSS a new http request is made for every import whereas with sass only one file is build is made which is more performant


@import url("file.css");

Partials

We can also import a partial (a file defined using a underscore, which we don't need to add at the time of import as sass is smart enough to understand). The benefits of using partial is that it doesn't compile into a new file also is included in the file.


// This will import a file named _variable.sass (a partial)
@import "variables";

`@use`

It is recommended to use @use while importing a partial, this helps us to avoid global name collisions (like two partials containing a variable with same name) and makes our code more modular

We can use as keyword with our module. This helps in achieving encapsulation and avoids global scope pollution


// _variables.scss
$color-grey: #030303;
$font-modern: "Gilroy", sans-serif;

// main.scss
@use "variable" as v;

body {
	background-color: v.$color-grey;
}

Mixins

Mixin are yet another feature of sass which allows us to reuse styles.


@mixin box($side: 100px){ /* default value of 100px */
	height: $side;
	width: $side;
	border: 1px solid black;
}

.one {
	@include box(200px);
}

.two {
	@include box();
}

Here we created a mixin box that takes a side (defaults to 100px) if no side is given. Then we are using it inside .one and .two

Inheritance

Inheritance means when one element can get all the properties of its parent. Like we inherit features from our parents. Using sass we can use @extend code to inherit properties into another selector

Extending a class

We can get all the properties from a class into another one using @extend

This will create a .box class in the output css even though we don’t need to use it


.box {
	height: 100px;
	width: 100px;
	border: 1px solid black;
}

.a {
	@extend .box;
}

This generates a separate .box inside the output file

Extending a Placeholder `%`

This will not create a separate .box class but only a placeholder that we can extend anywhere we want


%box {
	height: 100px;
	width: 100px;
	border: 1px solid black;
}

.a {
	@extend %box;
}

Using placeholder doesn’t generate any separate class

Functions

They are very similar to mixin as they take in inputs and then performs some calculations and returns a value

The key is that we can use operators inside our function


@function double($value){
	@return $value * 2;
}

body {
	font-size: double(20px); // 40px
}

In this example we created a sass function that takes in a value and doubles it and the returns it. Take in consideration that returning a value is important in a function

Project:

✌🏻 peace out!