January 2, 2014

Know How: Getting started with Sass

I have been interested in learning Sass for a long time, but I have had a problem finding quality information on Sass. What I could find was written for an advanced developer, not for someone just learning the language. My biggest worry was how much time and effort that would go into learning this language.

I received Sass for web designers book for Christmas, and after reading the first chapter, all my worries dissipated. I came to find out that the CSS markup that you have come to love can be used with the Sass markup! That was great because it allowed me to transition into the language and convert my stylesheets as I learned the Sass.

This book has helped me tremendously! Now I want to give back what I have learned. So below you will find how to set up Sass for your next web project.

Sass is not an attitude problem, it fixes problems

Sass acts like a shorthand for CSS. It is meant to simplify and streamline your code to make coding faster and easier to maintain. You code using the Sass vernacular then the Sass is processed to create the CSS for your document. You might be asking: “What is processing this code?” Sass uses a language called Ruby. Here is the first part of the setup:

1. Make sure Ruby is installed on your computer

Mac: Fortunately Mac OSX comes with Ruby already installed. Please move on to the next step.

PC: Unfortunately you will have to download Ruby and Install it on your PC. Ruby Installer is a great place to find the latest version of Ruby to install. Once you have installed Ruby move on to the next step.

2. Open terminal and type:

$ gem install sass

3. Tell Sass what files to automatically update

You will need to have two files set up. The regular Sass file and then the CSS file that will contain the processed code. The prompt you use depends on the file structure. Sass uses the .scss file extension.

If the files are in the same folder

$ sass --watch example.scss:example.css

If the files are part of a directory

$ sass --watch CSS-folder/sass:SASS-folder

Keep in mind that the file names don’t need to match. So you could use: $ sass --watch rock.scss:paper.css if you wanted.

Once you have entered the input any change to the .scss file will automatically be process and added to the .css file. If you are watching the two files, don’t make any edits to the .css file. Because your changes will be overwritten once you make a change to the .scss file.

You are now ready to code Sass. Keep reading if you don’t want to use the terminal or you would like to learn more about Sass.

Alternatives to the terminal

I’m not going to lie, it was hard for me to get used to the simple prompts. So, I can see how someone might want to avoid using the terminal. Below is an alternative solution to using the terminal.

Scout is a free app for Mac and PC that lets you manage your Sass without the prompt mentioned above. Best of all its free. Once you have downloaded the program and told the app which file to watch you are ready to go.

Get your learn on

For further information regarding how to use Sass. I would suggest your read Sass for web designers. This book is a great read because it is not overly complicated, yet thorough, and a great diving board for getting into Sass.

The Sass way is a great site to check out articles related to Sass.

Last but not least, check out the pen that I created using Sass.

View all thoughts →

Want to work together, say hi, or talk about tigers?