SASS Installation - SCSS Compilers And Setup

1. SASS Installation Requirements

In order to write and compile SASS programming script, we have to install it first on our operating system. Basically, SASS installation requires the following setup:

• Operating System: Windows or Mac OS
• Browser: Any latest browser will do the work, like Chrome, Firefox, Edge, etc
• Compiler/Transpiler: Basically, there are three ways to write and compile the code

1.1. Types of SCSS Compilers or Transpilers

1. Ruby SCSS: It requires Ruby programming language
2. LibSASS: Implements in C/C++ languages
3. Dart SCSS: It requires Dart programming language
4. SCSS Applications: A UI application helps in transpilation

2. Ruby SASS Installation And Transpilation

2.1. What is Ruby Programming?

Ruby is an open-source programming language with easy to understand syntax. Ruby is primarily developed with a focus on productivity and simplicity. It is a blend of Perl, Smalltalk, Eiffel, Ada, and Lisp to balance different paradigms of programming. Ruby SASS was the initial implementation of SCSS but it was deprecated on 26 March 2019.

2.2. Ruby SASS Installation

Step-1: Download Ruby

The first step is to download the Ruby language package with all the desired files. Below are the two methods for Ruby SCSS installation on desktop.

1. Ruby Zip Package: Browse the official website of Ruby programming and download the latest stable release of Ruby
2. RubyInstaller Package: Go to the RubyInstaller website and download the ruby installer package

Step-2: Extract Zip Folder

Secondly, Extract or install the downloaded package in your system. This is the initial step in installing Ruby SASS transpiler.

Step-3: Add Environment Variables

Moving further, the Ruby extracted folder has a bin folder. Add this bin folder to the PATH user and system variables to complete the setup. Do this carefully as follows:

a. User Variable

First of all, explore system properties and open Environment Variables Box. Now set the variable for the path user as depicted below: Next, place the ruby bin folder path in the field of variable as C:\Ruby\bin. Also, put a semicolon if there is already a path setting like shown:

b. System Variable

Further, click the button to add the system variable below the user variables box. Now write down RubyOpt in the Variable name field and rubygems in the Variable value field.

Step-4: Start Command Prompt With Ruby

At this stage, search for Start Command Prompt With Ruby in the start menu and open it.

Step-4: Install Ruby in CMD

Now run the below command in the command prompt and install the ruby.

gem install sass

2.3. SASS Transpilation Using Ruby

Since ruby language is installed in the system. Now you will learn how to use ruby to compile SCSS code. Navigate to the project folder via the command prompt. Create two files with index.scss and styles.css with respective extensions. Finally, run the below command to compile or transpile the code in the index.scss file to CSS stylesheet.

scss --watch inde.scss:styles.css

3. LibSASS

LibSASS is old of transpiling SCSS code using C/C++ language. Now it is deprecated and therefore the transpilation is shifted to Dart or other SCSS applications. It was deprecated due to a lack of features and compatibility as compared to Dart SCSS.

3.1. Wrappers

Basically, LibSASS was a library only and designed to be implemented via some other language, called wrapper. There are many LibSASS wrappers which include:

4. Dart SASS Installation and Transpilation

3.1. What is Dart Programming?

Dart is an object-oriented programming language that was developed by Google. Initially, Dart was a client-side language to build web and mobile applications. But we can use Dart on the server and desktop also.

3.2. Dart Features

Dart SCSS installation has some benefits over the normal setup. The main advantages are listed below:

• It is an open-source language
• Dart is extremely fast apps are built on all platforms
• It is optimized for UI
• Dart is the most used and encouraged implementation
• The Dart setup is very convenient, and swift, and transpilation is easy
• The latest features arrive soon in Dart
• It uses JavaScript and hence efficiently utilized in web apps

3.3. Dart SASS Installation

Step-1: Download Dart

• First of all, browse the official website of the SASS language
• Navigate to the footer menu and open the dart package hosted at the git hub
• The link will be in the form of the latest version i.e. 1.52.1 or the latest version
• On this location, locate the latest release of the Dart language package
• Download the package according to your operating system

Step-2: Extract Zip Folder

• Now, extract this zip folder
• Place the extracted items intoc:\program-files\ directory

Step-3: Add Environment Variable

Now add the environment variable for the Dart source folder. Add this by following the below instructions. Now the transpiler is ready on the system and can be used to write and transpile.

3.4. SASS Transpilation Using Dart

Step-1: Create Project Folder

1. First of all, make a folder for project files
2. Now, create two files with extensions index.scss and styles.css

Step-2: Code Editor

At this step, we used Visual Studio Code to carry out the process. There are various code editors available to do the job.

Step-3: Transpiling SASS Code

Now SCSS code is transpiled by opening both index.scss and styles.css files simultaneously. After opening the files, enter your scss code in the index.scss files and run the below command to do the math. [sass_example] sass index.scss:styles.css [/sass_example] Now to avoid running the command, again and again, run the command below. Doing so will allow the user to transpile the code by just ctrl+s keys. [sass_example] sass --watch index.scss:styles.css [/sass_example]

Modes

Basically, there are two modes of transpiling SCSS using Dart.

One-To-One Mode: sass [input.scss] [output.css]
Many-To-Many Mode: sass [input.css:output.css] [input.css:output.css]...

5. SASS Transpilation Via Applications

With the passage of time, new ways came into existence for compiling SCSS code. Now a user can transpile SASS code using some visual applications. Importantly, these applications run smoothly on Windows, Mac, and Linux. Further, these provide a lot of help to the programmers. These applications are fast and easy to run. Also, these applications save time by minimizing the steps for SCSS transpilation. Below are some SCSS transpilation applications:

• CodeKit (Paid) Mac
• Ghostlab (Paid) Mac Windows
• Hammer (Paid) Mac
• LiveReload (Paid, Open Source) Mac Windows
• Prepros (Paid) Mac Windows Linux
• Scout-App (Free, Open Source) Windows Linux Mac