🏊🏽‍♂️Dive into Sass/SCSS - A PRACTICAL approach

Intro to Sass/SCSS - PART ONE

SASS - Syntactically Awesome Style Sheets

Sass is a CSS preprocessor - which is just a fancy term for changing code/stylesheets from one form to another. In other words, Sass provides a way to extend the features of CSS allowing you to enjoy some of the features native to a programming language such as variables, functions, modules, mixins, inheritance, operators just to mention a few.

Before we dive in, lets first get the confusing part out of the way, shall we?

Sass (.sass) and Scss (.scss) ? Difference?

Sass is the older syntax for writing stylesheets inspired by HAML (http://haml.info/) - an HTML templating language that focuses on DRY, well indented and clear markup. A Sass stylesheet follows the same principles as shown in the code below

// .sass
body
  font-family: Helvetica, sans-serif
  color: #000

Notice how each of the style declarations is indented and no ';' is used to mark the end of the declaration. I have to say, it does look quite concise making it easier to read.

This approach has, however, been criticised because it looks and feels very different from actual plain CSS because:

• CSS uses ';' to mark the end of a style declaration
• Also, in CSS, curly braces ('{' and '}') are used to indicate a block of CSS rather than indentation of the statements

SCSS - Sassy CSS
Scss addresses the criticized aspects of sass by providing a more 'CSS' like way of writing stylesheets. For the above block of code, a .scss file would look more like this:

// .scss
body {
  font-family: Helvetica, sans-serif;
  color: #000;
}

The block above looks and feels like CSS. In fact, for this particular snippet, no major transformation needs to happen to transform it to CSS (Like literally, it already passes as CSS)

At the end of the day, people always have different perspectives of which of the two is 'better' so just go with whatever version you prefer. I personally want to feel like I am writing CSS when writing sass stylesheets so I always go with .scss

Let's take a look at how CSS is extended by sass

1. Variables

The term 'variable' refers to a storage unit for a value that is intended to be referenced in more than one places.

Take for instance a scenario where you want to define a uniform and consistent padding across all buttons and input values in the 'login.css' and 'signup.css' file (Assume that the login.css is for a login page and signup.css is for the signup page).

// login.css
button {
 padding: 1rem;
}

input {
 padding: 1rem;
}

// signup.css
button {
 padding: 1rem;
}

input {
 padding: 1rem;
}

In older versions of CSS (before the advent of css-variables and sass variables), you had to define and remember the value in all the padding definitions. Should you want to change or adjust the padding, you have to go to each and every definition of the style as shown below.
Sass provides a way to define a variable and reference it in all locations.

This means that you can simply change the value of the variable and this subsequently changes the value in all the locations where it is referenced.

// login.scss

// DEFINE VARIABLE INSIDE THE FIRST .scss FILE
$input-btn-padding: 1rem;

button {
 padding: $input-btn-padding;
}

input {
 padding: $input-btn-padding;
}

// signup.scss

// VARIABLE IS STILL ACCESSIBLE IN THE SECOND FILE
button {
 padding: $input-btn-padding;
}

input {
 padding: $input-btn-padding;
}

It is always a good practice to define a separate .scss file to hold all the variables. In such a case, ensure the variables file should be placed/loaded before all the other .scss files that require the variable values

@import 'variables.scss';    // LOADED BEFORE THE OTHER FILES
@import 'login.scss';
...

2. Import

As you may have noticed from the above descriptions, Sass allows you to split the styles into multiple files and consolidate them into one file. This is quite useful where you want to ensure:

• Separation of concerns
• Easier debugging of styles
• Logical organization of styles

The separated files; better know as 'partials', take the form shown below

_login.scss .    // _[name-of-file].scss

The underscore before the file name serves as an indicator that this file is not the main file but rather, a partial file that is intended to be consolidated into the main file. The directory would look something like this:

|
|- styles-folder
|--> _variables.scss  // VARIABLES LOADED FIRST
|--> _login.scss
|--> _signup.scss
|--> main.scss        // MAIN SCSS FILE

and the main.scss file would consolidate the styles as shown below:

@import 'variables';
@import 'login';
@import 'signup';

Notice that the underscore and the extension need not be defined when importing the separate styles into the main file.

CONCLUSION

We have barely scratched the surface of the power of sass but let's take a breather. By now you should be able to

• Distinguish between .sass and .scss formats of writing sass
• Define a sass variable
• Write separate sass stylesheets and consolidate them into one

NEXT

We will now delve into learning how to transform the .sass files to css and learn two more ways in which sass extends css