The browser can just read CSS and those CSS files are the ones connected in the HTML records. With the goal that part doesn’t change. What changes is that you never again compose CSS specifically. You compose SASS and it is then preprocessed into a CSS file. That file looks like only any CSS file, yet it is simply made on-the-fly from the SASS file.

SASS looks fundamentally the same as CSS however, has only a few differences. There are no curly braces {} or semi-colons utilized so there are less syntactic errors to stress over. Additionally, SASS utilized indentation and nesting so you never again have descendent selectors that delve a few layers profound into a site.

Advantages of using SASS

  • 1. Sass facilitates you to write clean, easy and less CSS in a programming construct.
  • 2. It contains some codes so you can write CSS quicker.
  • 3. It is more stable, powerful, and elegant because it is an extension of CSS. So, it is easy for designers and developers to work more efficiently and quickly.
  • 4. It is compatible with all versions of CSS. So, you can use any available CSS libraries.
  • 5. It provides nesting so you can use nested syntax and useful functions like color manipulation, math functions, and other values.

Installing and Configuring SASS

There are two ways to start using Sass:

1. Applications
There are some applications that will get you up and running with Sass in a few minutes for Mac, Windows, and Linux. You can download most of the applications for free but a few of them are paid applications.
1. The Sass Way
2. Compass.app
3. Koala
4. Scout-App

2. Command Line
You can install SASS through the command line.
1. Open the command prompt and type ruby -v. If Ruby responds, and it shows a version number then skip Install Ruby step. Otherwise, we’ll install a fresh Ruby.
2. Download an installation package from rubyinstaller.org. Follow the download link, and run the installer. This is an exe file and will be installed in a single click.
3. For check ruby version, Open the command prompt and type ruby -v.
4. Type the following command in the CMD to install Sass:- gem install sass
5. Check SASS version if Sass is installed:- sass –version
6. After SASS is installed, you have to tell it where the SASS files are located and then where the CSS files should go when compiled. Type the following command prompt and type sass input.scss output.css
7. You can watch and output to directories by using folder paths as your input and output and separating them with a colon. In this example: sass –watch dashboard/sass:CSS/stylesheets
Sass would watch all files in the dashboard/sass folder for changes and compile CSS to the CSS/stylesheets folder.

Let’s Start Coding Sass

SASS Variables
We’re all aware with variables and use them in our JavaScript, jquery etc. This is the exact same thing, but with CSS.

 

Nesting

Partials
You can create partial Sass files that contain little bits of CSS that you can incorporate into other Sass files. This is the best method to modularize your CSS and help keep things easier to maintain. A partial is simply a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore tells Sass that the document is just a partial file and that it should not be generated into a CSS file.

Import
CSS has an import option that lets you split your CSS into smaller, more maintainable portions. The only drawback is that each time you use @import in CSS it creates another HTTP request.