Sass Installation: 4 Methods to Install and Compile SCSS

Getting Started with Sass Installation

Before you can write or compile Sass or SCSS code, you need to set up the environment on your system. This includes having a compatible operating system, a modern web browser, and a Sass compiler or transpiler installed. Once these are ready, you can start creating and compiling styles efficiently.

• Operating System: Windows, Mac, or Linux
• Browser: Any modern browser such as Chrome, Firefox, or Edge
• Compiler/Transpiler: Install your preferred Sass compiler or transpiler

Types of SCSS Compilers or Transpilers

According to the official Sass documentation, Sass can be implemented using different compilers or transpilers:

1. Ruby SCSS: Requires the Ruby programming language
2. LibSass: Implemented in C/C++
3. Dart SCSS: It requires Dart programming language
4. SCSS Applications: A UI application that assists with SCSS transpilation

Let's explore each of these compilation methods and set them up to start writing clean, indented Sass or SCSS for your projects.

Ruby Sass Installation And Transpilation

What is Ruby Programming?

Ruby is an open-source programming language with easy-to-understand syntax. Ruby is primarily designed 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.

Step-1: Download Ruby

• There are only two sources to download Ruby SCSS.
• Ruby Zip Package: Get the latest stable release from the official site.
• RubyInstaller Package: Download the installer from RubyInstaller website.

Step-2: Extract Zip Folder

• Locate the downloaded Ruby Zip or Installer package.
• Extract the Zip folder or run the installer.
• Follow the prompts to install Ruby on your system.
• This sets up the Ruby environment for Sass compilation.

Step-3: Add Environment Variables

• Locate the bin folder inside the extracted Ruby directory.
• Copy its path to add to your system and user PATH variables.
• Open environment variable settings and append the bin path carefully.
• This allows your system to recognize Ruby commands for Sass and SCSS compilation.

a. Add Path To User Variable

• Open System Properties and navigate to Environment Variables.
• Locate the Path variable under User variables and select Edit.
• Add the full path of the Ruby bin folder to this variable.
• Click OK to save the changes and close the dialog boxes.

b. Add System Variable

• Click New under System variables.
• Enter RubyOpt as the Variable name.
• Enter rubygems as the Variable value.
• Click OK to save and close all dialog boxes.

Step-4: Start Command Prompt With Ruby

Search for Start Command Prompt With Ruby in your Start menu and open it to begin using Ruby for Sass compilation.

Step-5: Install Ruby in CMD

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

gem install sass

Sass Compilation Using Ruby

• Navigate to project folder using Ruby Command Prompt
• Create index.scss file
• Create styles.css file
• Run command to compile SCSS to CSS

scss --watch index.scss:styles.css

LibSass SCSS Compilation

LibSass, a C/C++ based SCSS compiler, is now deprecated. Transpilation is recommended using Dart or SCSS applications due to better features and compatibility.

LibSass Wrappers

LibSass was a library requiring a wrapper for integration with other languages. Popular LibSass wrappers include:

Dart Sass Installation and Transpilation

What is Dart Programming?

Dart is an object-oriented language developed by Google, primarily for building web and mobile applications, but it also supports server and desktop development.

Why Use Dart for Sass Compilation or Transpilation?

• Open-source and widely supported
• Fast compilation across all platforms
• Optimized for UI development
• Most recommended Sass implementation
• Easy setup and quick transpilation
• Receives latest Sass features quickly
• Efficient web usage via JavaScript

Step-1: Download Dart

• Go to the official Sass website
• Open the Dart package on GitHub
• Locate the latest release version
• Download the package for your operating system

Step-2: Extract Zip Folder

• Extract the downloaded zip folder
• Move contents to C:\Program Files directory

Step-3: Add Environment Variable

• Open System Properties and go to Environment Variables
• Add the Dart source folder path to the PATH variable
• Save changes to apply the environment variable

Sass Transpilation Using Dart

Step-1: Create Project Folder

• Create a folder for project files
• Create index.scss and styles.css inside the folder

Step-2: Code Editor

• Use a code editor for writing Sass/SCSS
• Recommended: Visual Studio Code
• Other editors: see HTML editor list

Step-3: Transpiling or Compiling Sass or SCSS Script

• Open index.scss and styles.css files
• Write your SCSS code in index.scss
• Run the Dart command to transpile SCSS to CSS

sass index.scss:styles.css

• Run the watch command in Dart
• Save index.scss with Ctrl+S to auto-transpile

sass --watch index.scss:styles.css

Dart Compilation Modes

There are two main 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]...

Sass Transpilation via Applications

With time, visual applications emerged to simplify SCSS transpilation. These tools run on Windows, Mac, and Linux, offering fast, easy, and efficient ways to compile Sass. They minimize steps and save time for developers. Popular SCSS transpilation applications include:

• TutsInsider Online Sass Compiler
• TutsInsider Online SCSS Compiler
• 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