Sass is a CSS preprocessor that helps you handle jobs in large projects when the style sheets grow in size and you have a lot of CSS code to maintain.

You may reuse code, break it into files, and make functions, variables, CSS selector nesting, and other shortcuts with Sass.

How Sass works on Web Browsers

Sass is not understood by the web browser, it only understands CSS code. As a result, you'll need to convert the Sass code to CSS. This transformation is known as compilation.

When you write Sass code in a .scss file, it is compiled into a standard CSS file, which the browser utilizes to render the page.

Difference between Sass and SCSS

Sass is sometimes also know as SCSS. This could sometimes create some confusion, when you don't know the difference between Sass, & SCSS.

SASS is a CSS syntax, which uses pure CSS commands, Whereas, SCSS is a version of Sass, which also have a similar syntax CSS.

Sassy CSS is another name of SCSS, it has the .scss file extension. It is the most recent and widely used version of Sass, as it has a syntax that is comparable to CSS. This is due to the fact that it is a language extension or a superset of CSS.

As a result, any valid CSS code also qualifies as a valid SCSS code. Here's a example of Sass, with a SCSS Code Snippet:

body {
  background-color: #ffffff;
  color: #000000;
}

Whereas "Sass" refers to an earlier Sass syntax. You may think of Sass as the father, and SCSS as the kid who looks a lot like his father. Brackets are used in SCSS, however indentations are used in Sass.

The .sass file extension is used by Sass. Sass may appear difficult, but it's important to remember that if you know CSS, you already know Sass. Here's a example of Sass, with a Sass Code Snippet:

body
  background-color: #ffffff;
  color: #000000;

Advantages of Using Sass

Sass is definitely a considerably good choice for developers to use it on their websites. But, before you should actually consider, here are some benefits of using it:

1. If you know CSS, Sass is simple to grasp. Its syntax is comparable to that of a CSS preprocessor.

2. Your CSS code will be compatible with all browser versions if you utilise Sass.

3. Sass also allows you to reuse your code by allowing you to create variables and functions with mixins that may be reuse.

4. Sass reduces the repetition of developing CSS code, which saves time.

5. Sass is compiled into CSS, which includes all of the essential vendor prefixes, so you don't have to write them manually.

How to Install Sass

We'll start by downloading and installing Node. Then we'll install Sass and configure it in your project using the npm package manager.

Follow these steps to install Node globally on your computer.

1. Open your terminal.

2. Run the following command on your terminal.

   npm install -g scss
   

3. Create a empty folder. In this folder, we will make a Sass file for the project you'll be working on.

4. Create a Style.scss file on that folder.

5. Then run this command on the terminal, to create a style.css file from the style.scss file.

   sass --watch style.scss style.css
   

6. The setup and configuration are now complete! Sass is a programming language that you can utilize in your projects.

We have learnt everything you should consider learning before actually getting started with Sass as a beginner. Now, let's learn some fundamentals & basics of Sass.

What are Variables in Sass?

Variables keep track of data and allow you to reuse it across your CSS. Colors, fonts, and any other CSS value you believe you'll need to reuse may be saved.

This type of thing comes in handy in a lot of situations. The $ sign is used in Sass to make anything a variable. Here's an example of $ in Sass:

$primary-color: #ffffff;
$font-stack: Mono, sans-serif;

body {
  color: $primary-color;
  font: 100% $font-stack;
}

What is Nesting in Sass?

Sass has a nice feature called nesting. You can layer code, but not to the point where your CSS file grows too large or rendering performance suffers. It's not that you couldn't, but if you did, the code may grow too complex.

To know how to perform nesting in SCSS, let's take a look at an example:

nav {
  ul {
    margin: 5;
    padding: 5;
}

  li { display: inline-block; }

  a {
    display: block;
    padding: 5px 5px;
  }
}

The nav selector is nested inside the Ul, LI, and selectors. This is a smart way to arrange your CSS since it makes your code more readable.

What is Mixin in Sass?

@mixin is used to define a mixin in Sass or SCSS. It allows you to create CSS declarations in groups that may be reused across your whole website.

The @include directive was made to allow you to utilize your mixin. Here is the Syntax of Mixin:

@mixin name {
  property: value;
  property: value;
}

What are If/Else Statements in Sass

When you're testing for a specific situation in Sass, the @if directive comes in handy. It functions in the same way as every other programming language's if statement does. If necessary, you may also use @else and @else.

Here's an example code snippet for If, and Else statement:

@mixin make-bold($bool) {
  @if $bool == true {
    font-color: #ffffff;
  }
}

What are Loops in Sass

Loops in Sass function similarly to for loops in other programming languages. However, @for is used in two distinct ways in this case:

1. Start to End: 'Start to End' excludes the end number as part of the count.

2. Start through End: Start Through End includes the end number as part of the count.

This is a realistic and efficient method of establishing a grid system. Here's a simple example from start to finish:

@for $i from 1 through 17 {
  .col-#{$i} { width: 100%/17 * $i; }
}

What are While Loops in Sass?

While Loops function in the same way as every other programming language's while loop does. The @while directive produces CSS rules until a condition is satisfied. We can also make a basic grid system using a while loop. Here's how:

$i: 6;
@while $i < 17 {
  .col-#{$i} { width: 100%/12 * $i;}
  $i: $i + 6;
}

Firstly, we will define a variable $i and then set it to 1. Next, we will use the @while directive to create the grid system while $i is less than 17.

After setting our CSS rule for width, $i is incremented by 1 in order to avoid an infinite loop.

What is Webpack in Sass?

While the sass command line is easy and simple to use, when using a bundler like webpack or Gulp, you can use plugins to parse SCSS to CSS.

Below are the guides for each bundler. Bundlers have the benefit of being able to parse, autoprefix, and minify all at once.

What are Partials in Sass?

A partial is a Sass file with an underscore in front of the name, such as _nav.scss. This underscore informs Sass that the file in question is merely a portion of a larger file and should not be converted to CSS.

For example, if you're creating a website and want to include the _nav.scss file in the style.scss file, follow these steps:

@import 'nav'

Conclusion

You can't just pick up Sass or SCSS and use it right away. Before you begin using its frameworks, you must first grasp CSS.

As a result, if you are a rookie Web developer who is unfamiliar with CSS, don't read any more since you will become confused! If you know how to use frameworks correctly, they may be quite handy.

SCSS is a well-known system that comes to the rescue in a variety of situations. But there are more superheroes out there, such as Bootstrap and Tailwind! Make sure to look through all of them before deciding on your one and only.