How to install and begin with Sass
The installation procedure of Sass can be carried out in various ways such as using some open-source applications, installing Sass using the command line, installing it on your desired code editors such as VS Code, Sublime, Atom, etc, or installing it anywhere from the Github repository.
Let’s discuss these installation procedures in detail.
Install Sass using Applications
There are numerous applications available (paid and free) that will help you install and run Sass in no time for Windows, Mac OS, and Linux. Some applications are listed below.
- Prepos (paid) for Windows, Mac, and Linux.
- CodeKit (paid) for Mac.
- Hammer (paid) for Mac.
- Koala (free) for Mac, Linux, and Windows.
- Scout-App (free) for Linux, Mac, and Windows.
Note: There is no need to use the paid applications for the initial development phases because the free ones are fully functional.
Install Sass using Command Line
Below we have discussed how you can install Sass using the command line on various platforms.
Installing anywhere (Standalone)
You can with great ease install Sass on any platform such as Mac Os, Linux, Windows by downloading its package that is relevant to the platform you use, from Github repository. Once downloaded include the package in your PATH. Such an installation does not require any dependencies, therefore, it is the easiest approach.
Installing through npm
If you are a Node.js user then you can use the following npm command and install the package of Sass.
The command above installs a pure JS implementation of Sass which is a bit slower than other installation options available. However, if you desire to enhance its speed then you can change your implementation to any other since the JS implementation has the same interface like other implementations.
Installing through chocolatey
If you have a Windows operating system and also have a chocolatey package manager installed then you use the following command to install Dart Sass.
Installing through Homebrew
Mac OS X and Linux users can install the Sass package using the Homebrew package manager through the following command.
Install Sass on Code Editors
As already mentioned you can use Sass on various code editors such as VS code, Sublime, Atom etc. This might be a preferred option for many since most of us are already familiar with many popular code editors. For instance, for the sake of understanding, here we will demonstrate how you can use Sass on VS code.
Visit the Live Sass Compiler and press install to download the extension.
As soon as you press install button, the extension will open in your VS code editor.
Now press the highlighted install button and the extension will be installed in the code editor.
Extension installed successfully!
Note: When the extension is installed, you can use Ctrl + shift + x to open the extension anytime you want.
Now you can open the .scss file and start writing your stylesheet. Once you do this you will notice an option saying “watch Sass” in the editor.
Click this option to generate the CSS map file, and the CSS file automatically. Later on, you can link this CSS file to your HTML document.
Follow the above-mentioned steps to easily install Sass on your VS code editor.
You can install and get started with Sass using various ways such as using some open-source applications, installing it using the command line, installing it on your desired code editors such as VS Code, Sublime, Atom, etc, or installing it anywhere from the Github repository. You can select any of the options depending upon your ease and desire. All of these options have been explained in-depth in this post.