Installing Sass and Getting Started
Let's get started with the basic setup for SASS compiler and styling the web with SCSS.
Installing SASS/SCSS
There are several ways to set up Sass on your computer. There are few open-source applications which will help you to get started in minutes (or) you can install it using your command line (or) you can set it up on your famous code editors such as VScode, Atom, Sublime, etc (or) install it anywhere using GitHub repository. We will only see some good setup options like command line and VS code editor in detail. First, we will see the command-line interface installation.
1. Install anywhere (Standalone)
You can easily install Sass on Windows, Linux, MacOS by downloading the packages for your operating system from Github (1.24.5 is the latest version as of 17th Jan 2020) and then adding it to your PATH environment variable. Installation like this is the simplest as there are no other dependencies that are required. All you have to do is download the package, keep it somewhere and then add it the PATH variable.
2. Install using NPM
If you use Node.js or for some reason have NPM installed on your machine(NPM installation guide), you can use the following npm command to install the sass package. Open the terminal, write and execute the following command there,
npm install -g sass
This will install the Sass compiler on your system.
3. Install using Homebrew (Mac OSX)
If you use the MacOS, then you can use Homebrew(Homebrew installation guide) to install Sass on your machine. You can use the following command to install Sass using homebrew,
brew install sass/sass/sass
Once you have successfully installed the Sass command-line interface on your machine, you can run the following command to verify if you have installed it correctly,
sass --version
For the current version, you must get 1.24.5 as the output for the above command. Also, you can use the sass --help command to get more information about the command-line interface.
Transpiling SCSS to CSS using Command Line Interface
You can use the following command to compile your SCSS code to CSS code.
sass source/stylesheets/index.scss build/stylesheets/index.css
In the above command, sass is the command whereas source/stylesheets/index.scss is your source SCSS file and build/stylesheets/index.css is the destination file where the compiled/transpiled CSS is stored.
Installation using Open Source Applications
These will give you sass up and running in just a few minutes, you just need to download it and then start using it as any other code editor. Check out these applications below:
These are some of the free ones, and there are some paid ones too, but the free ones are more than enough for learning and initial development purpose.
Code Editors for Sass
This may be a better option as you may already be using some famous code editors. We will see the setup in the VS code editor and Atom code editor. VS code may be a good option because it has many other features such as a live server, syntax highlighting, etc which can be useful and easy to use.
1. Using VS Code for Sass
The setup in the VS Code is quite simple, as all you need here is live sass compiler extension. The extensions give you extra features that are not present by default in the VS code. You can write your own extension too. Here we will only look at the VS code extension in detail. Follow the following steps to set it up.
-
Open the VS Code editor.
-
Press Ctrl + Shift + x or the square like icon in the left of the editor to open the marketplace(last one in the image shown below).
-
Search for live sass compiler in the search bar and when you open it you should be able to see this. Install this by pressing the install button and you are good to go.
-
Now open a file with extension .scss and write your SCSS code to it. You will find one small option at the bottom which says watch my sass, once you click this, CSS map file and the CSS file will automatically get generated. You need to link the CSS file to your HTML code, not the CSS map file.
2. Using Atom for Sass
Atom editor also has an extension i.e sass-autocompile like the VS code, you can find all the instructions about the setup in the given link.
Conclusion
With this we have our set up ready to start working with Sass, we know how to convert SCSS code to CSS code and then use the generated CSS code into our HTML. From the next tutorials, we will learn more about coding in Sass.
