Let’s talk Sass and why you should use it for your Stylesheets

Introduction

Styling with CSS is a pain and that’s the truth of the matter. Most developers find it hard to use the box model and center divs and even after trying and learning how to center divs, you then get the shocker that not every browser is compatible with your styling and you have to add extra lines of code to provide compatibility for other browsers.
Well, worry no more. Sass takes care of compatibility issues of browsers by being compatible across different browsers and also new versions of Sass are backward-compatible meaning that older Sass syntax or lines of Sass code can still work without modifications. And if you want to have fun while writing CSS code then I can think of no better way than to learn SASS

Without further ado, let's get into it.

SASS supports two different syntaxes which can load up each other and they are Indented Syntax which is the original SASS syntax and SCSS.

What is Indented Syntax or SASS?

SASS is short for Syntactically Awesome Style Sheet. I know, I know, syntactically sounds like a lot no? Well, what it means is that the lines( syntax ) of SASS code are so awesome that it is known as CSS with superpowers.
SASS is known as a CSS preprocessor meaning that it lets you create and write code that is then compiled into CSS. SASS uses the file extension .sass
SASS code has a loose syntax with no semicolons, it is preferred for those that want to be concise as possible when writing CSS code. An example of SASS code is given below:

body
  display: inline-flex
  position: relative
  border: 2px solid #FF0000
  border-radius: 3px

What is SCSS?

SCSS is short for Sassy Cascading Style Sheets. SCSS uses the file extension .scss and it's a superset of CSS which means that all valid codes of CSS are also valid codes of SCSS. Based on its closeness and similarities with CSS, it is the easiest syntax to get used to and also to write which makes it the most popular between the two syntaxes. SCSS is preferred by those that prefer similarities when writing CSS code. An example of SCSS code is given below:

body{
  display: inline-flex
  position: relative
  border: 2px solid #FF0000
  border-radius: 3px
}

Compiler for SASS and SCSS

One of the disadvantages of SCSS and SASS is the fact that browsers cannot read SCSS and SASS code. Therefore for your SCSS code to work, you have to install a compiler in whichever code editor you are using. The code editor will then take that written SCSS code and then interpret it into CSS which can then be understood by browsers. I use Visual Studio Code editor which is a free code editor by Microsoft and which supports extensions. I use Live Sass Compiler which is shown in the image below:

Now after you have installed the extension, you will see the Watch Sass icon below meaning that it is watching and compiling every SASS code to CSS.

Benefits of using SCSS

• Code Splitting: One of the benefits of using SCSS is that it allows for code splitting meaning that instead of having a huge and bulky SCSS file, you can have small, separate files for styling different parts of your web app and this also helps in the long run as it makes code debugging easier. All you need to do is put a _ in front of the file you want to split and then when you are done you then use the @import rule to import that file into your main SCSS file which won’t have the __ in front of it.
  

• Using Variables: SCSS offers the ability for you to create variables. Variables allow you to store a certain value and then re-use that variable throughout your code thereby keeping it DRY ( Don’t Repeat yourelf ). Below you can see how variables can be created:
  

$primary-color: hsl(210, 36%, 96%);
$secondary-color: #2ffff5;
$ubuntu-font: 'Ubuntu', 'Arial', 'Helvetica', sans-serif;
$nunito-font: 'Nunito', 'Arial', 'Helvetica', sans-serif;

We can then use those variables anywhere in our code like so:

h1{
  color: $primary-color;
  font: $nunito-font;
}

p{
  color: $secondary-color;
  font: $ubuntu-font;
}

• Nested Syntax: Imagine you have a section with a class of projects and inside that section, you have a div and a button with a class of projects_items and projects_btn respectively. Now SCSS allows you to nest those classes together instead of using the traditional CSS way of targeting each class separately. Now nesting allows for easy to read and maintainable code, it also prevents us from rewriting selectors multiple times. Example of nesting is shown below:

.projects {
  color: $primary-color;
  font: $ubuntu-font;
  padding-bottom: 2rem;

  &__items {
    width: 60vw;
    margin: 2rem auto 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 2rem;
  }

    &__btn {
    font: $nunito-font;
    color: $secondary-color;
    font-size: 1.4rem;
    opacity: 0;
  }
}

• Mixins: Using variables in your code is amazing right, but mixins are more cool and amazing. Mixins let you define styles that can be re-used throughout your code. We then use @include to ‘include’ our mixin wherever we want to use it An example of mixin is given below:

@mixin transition-ease {
  color: $secondary-color;
  font: $ubuntu-font;
  transition: all 0.5s ease-in-out;
}

To include our mixin in any part of our code:

a{
  @include transition-ease;
}

Conclusion

In this article, we introduced and talked about SASS, its benefits, and why you should start using it instead of the conventional CSS. You can visit here to learn more about SASS.