Getting Started With Sass/SCSS

Sass

Hey all! This article provides you with a meaningful guide on how to get started with Sass/SCSS.

Contents

1. Introduction
2. Installation Methods
3. Usage Methods
4. Application Tools

Introduction

In my previous article I wrote a handful introduction on Sass/SCSS, you can check it out.

Now let’s get started with Sass installation methods and usage.

Installation Methods

You can install and process Sass in a few ways, using:

1. Official Sass which requires Ruby
2. Node-Sass which runs on Node.js
3. An Application Tool might include Sass

Sass Installation Method Requires Ruby

Sass/SCSS are usually compiled using Ruby, install Ruby on your system before you install Sass.

Ruby Installation on a Macintosh Computer

Ruby is pre-installed on all Macintosh computers.

Ruby Installation on a Computer Running Windows

To install Ruby on your Windows computer, use the Ruby installer here. In addition to putting Ruby on your computer, the installer also installs a Ruby command line powershell application, giving you access to Ruby libraries.

Official Sass Installation Using the Command Line Requiring Ruby

Ruby uses gem to manage its various packages of code, including Sass.

1. If you’re using a Macintosh, open the Utilities folder, and then click the Terminal.app.

2. On a Windows computer, run cmd.

For all three installation methods (Mac, Windows, Linux), first install the Sass gem:

gem install sass

To ensure Sass is installed, type this in your terminal application:

Sass -v

Again, to run Sass from the command line (and in this example we transpile input.scss into output.css), enter the following:

sass input.scss output.css

Node-Sass Installation Method Requiring Node.js

In this section, you will be using Node-Sass and Visual Studio Code to handle your SCSS. You will need to install Node.js in order to run Node-Sass. Go here to learn more about installing Node and NPM.

Once you have Node installed, you will use the Command Line to install Node-Sass, using this:

npm install node-sass

Running Node-Sass

In the Lab, you will be running your Sass with a Visual Studio Code Task Runner, but you can also run Node-Sass with the Command Line by typing:

node-sass input.scss output.css

For more information about the usage of Node-Sass, go here.

Usage Methods

The Command Line is the a very common way to use Sass to process your SCSS files. As we showed earlier, you can use the sass command to take a .scss input and give you a .css output file. We can also watch a file or folder for changes before generating the new .css file.

We can use task runners like Gulp or Grunt to manage or Sass or Less files. Task runners are usually JavaScript that handle various tasks for a web site platform including preprocessing Sass, checking for syntax issues, and concatenating/minifying. This method is very helpful and worth some time to learn about, but it’s out of scope for this course.

Some integrated development environments (IDE) also are able to handle processing your Sass or Less files. Popular front-end IDEs include Visual Studio Code, Sublime Text, Atom, and WebStorm. We will be using Visual Studio Code to access Node-Sass to process out .scss files in the upcoming lab.

Application Tools

If using the command line is a bit overwhelming, you can roll the preprocessor into your workflow by using a simple GUI on your development machine and compile as you go. Several applications are available for Sass and Less. Some of those available applications are:

CodeKit

CodeKit is a GUI interface for dealing with Sass and Less and currently is only available on the Mac. Install CodeKit to avoid setting up preprocessing via the command line. It’s as simple as dragging the files you want to compile into CodeKit’s GUI. CodeKit watches those files, and recompiles every time you make a change. Basically, every time you save your code and update the index.html file, CodeKit generates the CSS file and it automatically updates the browser. In addition to preprocessing, CodeKit includes script minification, image compression, and code hinting. You can purchase it here.

Compass.app

Compass.app is a versatile multi-platform GUI that compiles Compass, which is a framework for Sass. Compass is a style sheet authoring framework that makes your style sheets and markup easier to build and maintain. With Compass, you write your style sheets in Sass instead of CSS, without having to use the command line. Compass.app is written in Java (JRuby), and works in Mac, Windows, and Linux. You do not need to install the Ruby environment first to use it. Find compass.app.

GhostLab

GhostLab is a Mac-based app that compiles Sass and tests responsive design across a variety of devices and browsers. It supports Sass and Less, tracking changes to local files and refreshing them on all connected clients. GhostLab has two modes of synchronizing which page to load and when, automatically loading the most recent HTML content with one-click synchronization. You can find it here.

Hammer

Hammer is a web development tool for Mac that automatically compiles Sass to HTML, CSS, and JavaScript. In addition, Hammer builds, previews, and publishes static HTML sites and templates. You can find it here.

Koala

Koala is a GUI application for Sass and Less that is cross-platform and offers real-time compilation. Koala runs on the Mac, Windows, and Linux.

LiveReload

LiveReload compiles Sass and monitors changes in the file system. As soon as you save a file, it is preprocessed, as needed, and refreshes the browser. LiveReload instantly updates the browser whenever you change a CSS file or an image. LiveReload is available for the Mac, Windows, and Linux, and you can find it here.

Prepros

Prepros is a tool that compiles Sass and Less with automatic CSS prefixing and includes a built-in server for cross-browser testing. It contains a built-in server for previewing projects without file URL restrictions. Previews and refreshes projects across mobile and other devices connected to your network. Prepros runs on the Mac, Windows, and Linux, and you can purchase it here.

Scout

Scout is available for Mac and Windows and runs Sass and Compass in a self-contained Ruby environment. Since Sass and Compass are Ruby gems, using Scout requires that you have a working knowledge of Ruby. Scout allows you to bypass the command line. Get the free download.

File and Folder Structure

No matter what method you use, the process and outcome will be the same. The directory where your Sass/SCSS files live is called the input folder. Your processed CSS files are saved to the output folder. These folders can be set up however you like, even nested inside one another. A typical pattern is for the input folder (labeled scss, in this example) to reside with your site’s regular style sheets folder, like this:

my_project/
index.html
css/
main_style.css
scss/
main_style.scss
_mixins.scss
_colors.scss

I hope you’ve found this Getting Started with Sass/SCSS article helpful, and that it has provided useful information to assist you in selecting the best fit for how you handle preprocessing. If you are not ready for using the command line tools, it makes sense to invest in an application that will help you. The point is start utilizing the power of Sass in whatever way you are comfortable with, it will be worth the learning curve to have this powerful tool.

Thanks for the read!

Clap! Share! Clap! Share!