Sass: Installing on NetBeans and Getting Started

Sass is a great precompiler that makes CSS simpler and more efficient. It’s easier to code your CSS files for you to build your web pages. You are able to write your stylesheets in sass, and have it translate into css automatically.

For people would would like to have Sass or SCSS installed on their NetBeans program, here is a quick and simple tutorial on how to do that.

The first thing you want to do is download Ruby to your computer. Any version is okay, but to be sure download the latest version. Here I will be using Ruby 2.2.6 on Windows.

Here is a link to the installers for Windows: https://rubyinstaller.org/downloads/

Once you have installed Ruby to your computer, open up the Start Menu and under the All Programs tab, find the Ruby folder and click on the Ruby Command Prompt, like so:

On the command line type gem install sass. It might take a minute to install, but should appear something like this:

After the gem has been installed, you now wanna type in sass -v. And this is the message you should get:

Once you have gotten the message, Sass 3.4.23(Selective Steve), you now have Sass installed. Next you wanna open up your NetBeans and create a new web project. Once you have created your new project, add a folder under the Web Pages folder and name it css. Add another folder under the Web Pages folder and name it scss. You now can add a scss file under the scss folder, name it whatever you like.

Before you can actually start coding away, you must set the path to the sass folder. To do this you need to right click on the project, and select Properties. Then you want to select the CSS Preprocessors under Categories and check off the Compile Sass Files on Save:

Click on the Configure Executables button. Set the Sass path to where you saved your Ruby program, and make sure you open up the path on the sass.bat file, which is usually under the /bin folder:

Click the Apply button to save the changes and then the OK button. You are good to go! Start by adding a simple color change to your header with the scss file. Don’t forget to link the css file to the html file under <head>. Run the project to check if everything is working:

Scss File

I added variables to show you guys the change. The header should be the color blue and in the font Trebuchet MS.

Web Page
Result of the Web page after being compiled

There you have it, a quick way to set up Sass on NetBeans and a mini demo to start you off. You are now able to code in the scss syntax!