Up and running with Sass and Gerillass

Create modern web sites using Sass and Gerillass!

If you always wanted to learn what Sass is and how to install and run it on your computer, this post is precisely for you.

We will explore different ways to install Sass and run it on your machine to compile Sass related files to CSS files.

We will then get to know a magnificent Sass extension named Gerillass (which will help us create responsive page layouts and decorative design components in later posts).

Important: This post is not about the Sass syntax and usage in depth. It is about up and running Sass (as a pre-processor) and the Gerillass Sass library to make you ready to start using these two technologies to create beautiful web sites.

Table of Content

• What is Sass?
• How to install Sass?
• Installing Sass using Command-Line Interface
• A short introduction to the Sass Command-line Interface
• Up and running with Sass via Third-Party GUI applications
• Koala App
• What is Gerillass?
• How to install the Gerillass Sass Library?
• Conclusion

What is Sass?

Sass (Syntactically Awesome Style Sheets) is a programming language that supports you in generating CSS files using some programming features like variables, loops, math operators, functions, etc.

But the browsers do not understand Sass, so our Sass codes must be processed and translated into CSS. That is why Sass is called pre-processed language, and we need a wrapper (pre-processor) to compile our code from Sass language to CSS.

Note that there are different types of wrappers (Sass pre-processors), so you may need to pick one depending on the project you are working on.

To learn more about the wrappers, check the following links:

• https://sass-lang.com/libsass
• https://sass-lang.com/dart-sass

How to Install Sass?

There are several ways of installing and running Sass. Here, we will cover two methods to achieve this goal: One is to install and run Sass by the command-line interface, and the second is to use a third-party GUI application.

You can use whichever of these methods you find convenient.

Note: Truly, there are many ways of installing and running Sass. After reading this post, please, feel free to look for them and find the best way for you to run Sass on your computer.

Installing Sass using Command-Line Interface

One way of installing and using Sass is the command-line interface. While it is the most familiar and preferred way for web developers, it can sometimes be very annoying for the beginners (it was to me at first).

1. Installing Sass via npm

If you use Node.js, you can install Sass via npm (Node Package Manager) by running the following command:

npm install -g sass

Note that the Mac users may need to use sudo at the beginning.

sudo npm install -g sass

Note: Installing Sass via npm will install the pure JavaScript implementation of Sass. That means file processing will be somehow slower than the other Sass implementations. But don’t worry, the interface will be the same. If you like to be faster, you can swap to another Sass implementation later, easily.

2. Installing Sass via Homebrew (for MacOS X and Linux users only)

If you use the Homebrew package manager you can install Dart Sass by running the following command:

brew install sass/sass/sass

3. Downloading Sass from Github (Standalone)

You can download the Sass repository for your operating system from Github and keep it anywhere on your Windows, Mac, or Linux computer.

Download Link: https://github.com/sass/dart-sass/releases

Extract the downloaded file, replace the folder anywhere on your computer, and set the PATH options. That’s it; you don’t need to install any other dependencies.

For more information, please check the installation details.

A short introduction to the Sass Command-line Interface

After you install Sass by using one of the methods mentioned above, you can check the version to be sure that you installed it correctly by running the following command:

sass --version

If you see the version number, it’s good to go; now you can run the following command to compile your Sass code to CSS:

sass assets/scss/styles.scss assets/css/styles.css

Run the following command to watch the code changes and recompile the Sass file when you save it:

sass --watch assets/scss/styles.scss assets/css/styles.css

You can also run the following command for more information about the command-line interface.

sass --help

Please check the Sass Guide at https://sass-lang.com/guide to learn more about the Sass basics.

Up and running with Sass via Third-Party GUI applications

There are outstanding third-party GUI applications that will get you up and running with Sass just in a couple of minutes. Some of them are paid, some others are not.

Here’s a list of both free and paid Sass applications:

• Koala (Open Source) Mac, Windows, Linux
• Scout-App (Free, Open Source) Mac, Windows, Linux
• SassMeister (Free) Online Tool
• LiveReload (Paid, Open Source) Mac, Windows
• Compass.app (Paid, Open Source) Mac, Windows, Linux
• Prepros (Paid) Mac, Windows, Linux
• CodeKit (Paid) for Mac only
• Hammer (Paid) for Mac only
• Ghostlab (Paid) for Mac only

Koala App

Koala: The best Sass compiler ever!

Koala is my favorite GUI application for Sass (although it is no longer under development since 2017). It is free, available for all the operating systems, and very easy to use. You are all free to use another application, of course, but I guarantee you that Koala is the most comfortable GUI application for Sass so far.

That’s why I will explain how to install and use Koala to compile our .scss and .sass files to .css files.

Note: I’m a macOS user; if you use another operating system, don’t worry, installation is very easy and the usage will be pretty much the same.

Compiling our Sass files with Koala

Visit the Koala web site at http://koala-app.com/ and click the large green button to download the Koala installer file.

Install the Koala application into your machine and then start the program. If you see the below screen, that means it is good to go!

That is the start screen of the Koala application. You can either click on the plus icon or drag and drop a folder into the application screen to add a new project.

We don’t have any project folder yet. Let’s create one on the desktop and give it a name. I name it sass_project, you whatever you want.

When you are in that folder create a file named styles.scss, and open it with your favorite code editor (my favorite code editor is Visual Studio Code) and write some style rules in it.

Now, let’s add this project folder to Koala to watch the code changes and compile styles.scss file to styles.css file automatically.

To do that, you can drag and drop the sass_project folder into the application screen or click on the plus icon at the top left corner and select the project folder from the opening window.

As soon as you add the project folder to Koala, the application will automatically process all the Sass files in that folder. Thus you can see a list of those Sass files on the application screen.

Now, if you click the refresh button, you will see the compiled CSS file too.

You can filter the types of files showing in here by using the filtering options at the bottom of the application screen.

If you want to change the compiling settings of a Sass file, you have to click on it to see the options related to that specific Sass file at the right-hand side of the application screen.

I’m not going to cover all the options here, just the important ones.

Auto Compile: Helps you compile all the Sass files automatically when you add a new project to the application, and watch the file changes and compile when you save them. This option is activated by default.

Source Map: Adds a source map into your CSS files (Source map helps you debug the Sass code in the browser). The source map option is activated by default.

Autoprefix: If you want to add vendor prefix support to your CSS codes, activate this option.

Output Style: You can change the output style of the generated CSS file. There are “nested,” “expanded,” “compact,” and “compressed” options here. You can choose one of the options listed here that fits your needs.

You can change the style of the generated CSS file, thus you can create lightweight CSS outputs for the production.

Now let’s create another Sass file named typography.scss in the project folder to see how to deal with multiple Sass files.

After that, open Koala and click the refresh button on the application screen to see the new file.

Note that when you create or add a new Sass file in an available project, it is necessary to compile the new Sass file manually for one time only. Depending on the Sass configuration you prefer for that specific file, you can set the compilation setting to “Auto Compile” to compile it automatically or you can keep compile it manually.

Now click the typography.scss file and be sure that the “Auto Compile” checkbox is checked. Now click the “compile” button to compile it.

Easy, don’t you think?

What is Gerillass?

Gerillass is a web development tool built on top of Sass to create modern web design components easily.

It is a collection of Sass mixins and functions that will fasten your web development processes and help you create consistent and scalable CSS outputs regardless of the size of the project you are working on.

In this post, I’m only going to cover the installation of Gerillass and including it to our sass_project. But if you want to learn more about how to use it, feel free to visit the documentation page at https://docs.gerillass.com/.

How to install the Gerillass Sass library?

If you are working on a Node.js project you can install Gerillass via npm:

npm install gerillass

Or use Yarn to do that:

yarn add gerillass

If you are not using one of the package managers mentioned above you can visit the Gerillass site at https://gerillass.com/ and click the download button to get the library.

Uncompress the downloaded file and change the folder name from “gerillass-master” to “gerillass”, and drag it into our sass_project folder.

Now open the sass_project folder with your code editor.

Let’s import the Gerillass Sass library to our project. Simply add the following code line at the beginning of our stylesheet:

@import "gerillass/scss/gerillass";

Now, let’s call any mixin from the Gerillass Sass library to see if it works correctly.

Please copy the code below and past it wherever you want in the stylesheet.

@include antialias;

Open the compiled CSS file to see the changes.

You can see the newly added code between lines 10 and 14.

It’s alive!

Conclusion

We installed and ran Sass, and then we created a Sass project. We compiled our Sass files to CSS, and finally, we installed a Sass library named Gerillass and include it in our project.

Probably you are asking yourself, “Why using Gerillass?” The answer is simple: There are dozens of handy utilities in the Gerillass Sass library that will help you create responsive and consistent web sites quickly.

From here, you can create your projects using Sass and Gerillass.

To learn more about Gerillass, please visit the official site or check the documentation page. If you have any questions, please contact me. I will gladly answer.

Thank you for reading so far. I hope you enjoyed it.

Stay tuned!