Running SASS on Localhost using the Command Line

When you have WordPress set up on your localhost (see link below if you don’t), you’ll want to start using SASS. While there are programs that will do everything in this article for you, it’s important to know what SASS is and how it works on a basic level. It’s also incredibly easy to use the Command Line to compile SASS, even for beginners.

Need to know how to set up WordPress on your localhost?

What is SASS?

SASS, which is surprisingly not the same as being sassy, stands for Syntactically Awesome StyleSheets. That’s real. It’s an extension to CSS that allows you to use powerful add-ons like variables and mix-ins. Because it looks so similar to CSS, it’s easy to learn. Essentially it removes repetition from your coding making it easier to find and update styling in the future.If you haven’t used SASS, it’s fantastic.

However, you’ll need to run SASS on your computer, so make sure you have a WordPress site set up on localhost. You can’t run it on live servers since most don’t have SASS installed.

You can use SASS on any website where you’d use CSS.

As a side note, you don’t have to use WordPress to use SASS. You can use SASS on any website where you’d use CSS.

Introduction to the Command Line

For those who haven’t use the command line before, it’s remarkably easy. However, unlike working in programs, you can quickly make a huge mess of your computer in the command line.

While you’re learning the command line (and really, in general), I’d recommend making sure your computer is backed up using time machine or another backup system that’s easy to restore. Also, don’t try out the command line when you have deadlines looming; if something goes wrong, you’ll need a couple of hours for any backup system to restore a previous backup point.

But don’t let that scare you! You want to avoid typing in things you don’t understand, but we won’t be doing anything major while using SASS.

If you’re on a MAC, the command line is called the Terminal.

If you’re on a PC, it’s called the Command Prompt. 

On either system, you can search for it by name and it will pop up.

It will look something like this on a Mac:

The command line works on pre-created commands. For example, if you type in “ls” (no quote marks), it will list out the files and folders in your current location. You can move into a folder by typing in “cd foldername”. You can move up a folder by typing in “cd ..” (again, never with the quote marks and respect the space in between the cd and the periods).

Cheat Sheet

cd folderName = open this folder
cd .. = go up one folder
ls = list out the files/folders in the location you’re at
sass -v = what version of SASS is installed

Try out these commands in the Command Line. You’ll need to be able to navigate through files to use SASS in the last step below.

You’re not hacking or creating or changing anything on the computer, you’re just moving through your files like you would when you double-click on a folder or hit the back bar in the finder window. But hey – it still feels cool, right?

Installing SASS

To use SASS, we’ll need to install it so the computer understands how to convert SASS into CSS. Just like you have to learn every programming language you use, you have to make sure the computer also knows the language as well. Installing it is essentially how we teach the computer the language.

Just like you have to learn every programming language you use, you have to make sure the computer also knows the language as well.

SASS already has fantastic instructions on installing it (and they’re really simple), so if you want to read them on their website, check out their SASS install page. I include the MAC installation information below.

SASS runs using Ruby, so if you are working on in Windows or Linux, follow their instructions to install Ruby and then come back. If you’re using a MAC, Ruby is already installed, so you’ll just type this in that command line to install SASS:

If your computer doesn’t like this, you can use the “sudo” command (it’s like using an administrator account):

That’s it! SASS is installed. You can double-check to make sure by typing the following:

The “-v” command checks the version of SASS you have installed. If you don’t have it installed, it will come back as not installed.

Setting up SASS within a WordPress Theme

If you’re not using WordPress, you can skip to the next section. For those looking to use SASS in the development of your theme, the following is how I organize my CSS files.

Under wp-content/themes/nameoftheme, there’s a default style.css file that your CSS normally is coded under. I’d recommend leaving that mostly empty (besides the required comment lines in the top area). Instead, create another folder named assets in the theme’s folder. Under that folder, create a folder named SASS. In the SASS folder, you can then split your SASS into multiple files to make theme easier to work with. Here’s a quick look at my folder structure:

• NameofTheme
  • style.css (just the comments required by WordPress)
  • assets (folder) <- you’ll navigate here in the Command Line later
    • sass (folder)
      • style.scss (base file that loads the SASS files below)
      • _variables.scss
      • _headerfooter.scss
      • _pagesposts.scss
      • _mobile.scss
      • etc.scss
    • style.css

You can split your SASS files in any way that make sense to you, just make sure to leave comments as needed and load all the SASS files into one root/base file – here called style.scss. The file “style.css” within the CSS folder (last item above) will actually be dynamically created below.

You might have notice in the above structure, that the assets/style.css file isn’t automatically pulled into a WordPress theme. To make sure this is loaded into your page, you’ll need to include this in your functions.php file in your WordPress theme:

SASS Watching

Here we are at the last step: “turning on” SASS so that the computer watches for changes in our style.scss file and processes them into pure CSS for our style.css file.

Within the Command Line, navigate to the folder that you’re working on. Use the command “ls” to list all the subfolders where you’re at, and “cd folderName” to move into folders.

If you’re starting at the root of your computer, you’ll can either go folder by folder:

Or you can go multiple folders at once:

Again, you’re just moving through folders, so if you type in the wrong folder name, it won’t matter, just retype the command.

Once you get inside ASSETS folder within your theme (see the file system above) use this command in the Command Line to “turn on” the SASS compiler:

First, we’re telling SASS to watch a file (don’t leave out the two dashes before the word “watch”). Next, we’re telling SASS where the SASS file is we’re watching (sass/style.scss) and where it should spit out the CSS file (style.css). In other words, the folder/fileName before the semicolon is our location of the SASS file; the file name after the semicolon is the location of where we want the computer to create the CSS file.

This setup will spit out the folder structure I laid out above. You can adjust according to your desired folder structure.

To stop the “watching” of the SASS file, directly into the same terminal window type: ctrl c

And Success!

Your SASS is being processed into CSS making your project that much quicker to code!

Each time you edit SASS, you’ll need to turn on the “watching” of the SASS file, and when you’re done with the project, you’ll want to exit by using the ctrl c, and closing the Terminal.

Coming Soon: how to push/pull your localhost site into Github/Bitbucket.