How I became SASSy (Part 1)

Not your regular kinda SASSy? I became SASSy in few days…The Journey and the Lessons

You can become SASSy too

Having worked with different types of CSS (external, internal and inline CSS) as a web developer and mastering the popular CSS framework (Bootstrap) to some extent, I always thought there was nothing more to learn about styling an HTML document.
Okay, so in case you don’t know what this is all about, CSS means Cascading Style Sheets. It is not a programming language, rather, it is a style sheet language so to say, used for the main purpose of Styling a Web page layout/display. This article is not going to teach you how to use CSS, to learn that, click here.

Some weeks back, I was introduced to someone (Mr. A) by a mutual friend (Mr. B). Mr. B wanted Mr. A to mentor me on some tech-required skills. Mr. B created a WhatsApp group to ease communication and added another person. Mr. B being a passive programmer as he claims decided to be the Tech Coach. That sounds like a good Job title, lol. So Mr. A wasted no time in introducing himself and giving some motivational talks and insights as to some Front-end required skills that could stand an individual out. One of which he mentioned learning SASS, and he recommended some tutorials.

So I’ll be sharing what I have learnt in SASS, in series. I’ll be discussing the basics of SASS:- Variables, Nesting styles, Mixins and Importing files.

SASS is a style sheet language. By style sheet language, we can tell this has something to do with CSS from the meaning I stated earlier. So SASS is a CSS pre-processor and it stands for SYNTACTICALLY AWESOME STYLESHEET. Now, truthfully, SASS is indeed Awesome.

WHY SASS?

1. It makes writing CSS even much easier and compact.
2. Reduces repetition of styles, thereby saves time.
3. SASS lets you use features that don’t exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS fun again.

Things you should know before learning SASS:

1. HTML
2. CSS syntax like Selectors, Classes, ids, pseudo-classes
3. Basic programming syntax like Variables, If statement

GETTING STARTED…Becoming SASSy

You can click here to download SASS application choosing your operating system. However, I recommend this SASS application.
After downloading your SASS application, click on the .exe file to install the application on your machine. And then you should see a window like the one below after installation, where you can drag-and-drop your project or browse your machine to add your project

Prepos SASS Application window with some projects

HOW IT WORKS

CSS has a .css extension while SASS is commonly used with the .scss extension (this means Sassy CSS) and that’s what I’ll be using. It can also be used with the .sass extension, however, this has a slightly different syntax from the .scss extension.
So in your Code Editor, open an existing project or create a new project (HTML). Then, create a CSS folder (if you don’t have it yet) where you would have your CSS files and also create an SCSS folder where you would have your SCSS files. When an SCSS file is created and styles are written in it, the file is converted or compiled into a CSS file in order for the browser to understand. So this means, your browser does not understand SASS until it is processed into CSS.
HINT: Whenever a SASS/SCSS file is created and saved, your pre-processor compiles the file into CSS and duplicates the file into your CSS folder (with .CSS extension) automatically, if you have the Auto Compile or Process Automatically option checked as in below image.

Image showing styles.scss inside the SCSS folder and a duplicate styles.css file created automatically inside the CSS folder

USING VARIABLES IN SASS
Variables are used to store information to be referenced and manipulated in a computer program. Variables in SASS are declared with the dollar sign ($), as we can see in the snippet below prefixing the bgColor and containerWidth variable names.

So let's see what is happening in the snippet below.

The snippet on the left-hand-side shows a styling in the SASS way while the right-hand-side code snippet shows the processed output of the SCSS file in CSS.

From the Snippet above, let me analyze what is going on step-by-step:
1. SASS is an extension of CSS, we are to follow the same rules of CSS Selectors

2. A Variable is declared in the SCSS file and then used in our CSS Selectors as seen above (CSS property/value pair).

3. Our pre-processor then automatically compiles this SCSS file into CSS

4. Pre-processor creates a duplicate SCSS file in our CSS folder (with .CSS extension) which will now display the correct CSS style format as we can see above (right-hand-side) and this is the format the browser understands.

P.S Do not forget to include your SCSS duplicate file (which is a CSS file in your CSS folder having the same filename as the current SCSS file) inside the HTML file you need the styles.

NESTING STYLES IN SASS
If you find yourself reading this article, it simply means you have a foundational knowledge of HTML (if not then click here to learn about some basics of HTML). So it means, you would likely understand what NESTING means. According to Merriam Webster, NESTING means to form a hierarchy, series or sequence of with each member, element or set contained in or containing the next.
In an HTML file, the structure of the file is written in hierarchy or series of elements contained or wrapped within another element, that is, elements are nested in HTML. However, this Nesting style does not exist in CSS. Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML

Code Editor showing both .scss (with Nesting style) and .css files (after compiling .scss file)

From the snippet above we can see how styles are Nested in SASS. So the nested styles mean:
1. Take the Selector (HTML element div with the id of dev_info), and set all text within it to the center with the text-align property.

2. Look for an “h5” element with the id of “country”, which is a descendant of the HTML element div with the id of “dev_info”, then set its font-size property to 10px

3. Look for an “a” element which is a descendant of the HTML element div with the id of “dev_info”, then set its text-decoration property to none (removes underline) and color property to white

HURRAAAAAYYY!!! You just styled your HTML document with SASS and now you also have become SASSy. Yeah, it is as simple as that. In the next series, I would be explaining Mixin (the WHAT & HOW) and also Importing Files (the WHY & HOW) in SASS.

Thank you for reading. You can drop in your comment, questions or recommendations. Click here to continue reading How I became SASSy (Part 2)

Special Thanks To

Mansur Lawal — —- -CEO, Halal Clothings
Joye Shonubi — — — FullStack JavaScript Developer
Majeed Kushimo —-Web Developer