installation | Sass

Sass installation

Saas install

Install Sass

Developers can install and transpile through CLI as well as through applications. We will install and transpile through CLI in this tutorial

Sass was originally accompained with Ruby. As now there are many applications that can transpile Sass, Dart Sass allows to transpile with CLI as well. As far as learning is concerned.

Sass install with NPM

If you have installed Node.js, you can also install Sass package using npm as following:

Saas install globally

npm install -g sass

In the code above, nmp is the Node Package Manager, absence of -g parameter will install the sass package in the local directory and the Sass transpiler will be able to used in that directory only.

Saas install locally

npm install sass

Sass install Portable

Sass install Standalone

You can install Sass on Windows, Mac, or Linux by downloading the package for your operating system from GitHub and adding it to your PATH. On Extract the downloaded compressed file (either .zip or .tar.gz) you will be ready to use Sass on following path

C:\extracted-directory\dart-sass

The file sass.bat or just sass (if checked Hide extensions for know file types in View tab of Folder Options). Just to test, run the following command to check the version of the sass

sass --version 1.22.10

The follwoing output in may be received, your result may be a little bit different from the following if using different version.

'sass' is not recognized as an internal or external command, operable program or batch file.

If you see message something like following, there is some problem while downloading. Please revisit the Sass install section again.

Sass install with Chocolatey on Windows

If you have installed Chocolatey, you can also install Dart Sass as following:

choco install sass

Sass install with Homebrew on Mac OS X

If you have installed Homebrew, you can also install Dart Sass as following:

brew install sass/sass/sass

Transpile Sass

sass C:\your-program\code\index.scss C:\your-program\build\index.css

Sass Watch

For realtime updates to a transpiled CSS file, use the following switch --watch with sass. Whenever .scss file be changed, CSS will be updated accordingly.

sass --watch C:\your-project\theme.scss:theme.css