A Newb’s Guide to Syntactically Awesome Stylesheets (Sass) – part 1

If you are reading this article, I can assume that you have in one way or another heard of or, through a colleague, have come in contact with Sass. I can also assume that Sass is somewhat of a mystery to you as well. How does it work? Why do some say that it is better then CSS? How can I integrate it into my design/development process? What are the benefits? What problems does it solve? Do I have to be a Rails developer to use Sass? Etc …

These are all important questions to consider when integrating a new language into your development stack.

What is Sass?

Sass is a ‘pre-processing’ language. Meaning that the Sass documents cannot consumed by the browser, but need to be processed into another language that can. Sass is processed into CSS, similar to the way that CoffeeScript is processed into JavaScript

Sass has two syntaxes, one for foo.sass and one for foo.scss. The original syntax, foo.sass is a white space delimitated syntax that is more lightweight then the standard CSS syntax. A return and soft tab (two spaces) are what separate a selector from it’s declaration. Only a colon( : ) is needed to separate a property from it’s value. It is the return that separates one declaration from another, unlike the semi-colon( ; ) that is needed in CSS.

Sass

.block
  background: orange
  border: 1px solid black

.foo
  text-align: center
  Font-size: 1.3em

Many users had issue with this lightweight syntax. The main problem is the huge gap between standard CSS syntax and Sass, so converting a whole library of CSS files to Sass was, at times, a mountain of work. Sure, there were syntax converters, but for a long time these were only available in the command line. To some, that is downright unusable.

Seeing this as a real language adoption issue, Sass’ core development team decided to introduce the SCSS syntax.

SCSS, or ‘Sassy CSS’, has all the same features as the Sass syntax and directly supports vanilla CSS. Unlike Sass, SCSS is delimited by, curly brackets( {} ), colons( : ), and semi-colons( ; ). This is important because now you can simply take any CSS file like foo.css, rename to foo.scss and instantly take advantage of the power of Sass without having to reformat your legacy code. To many, this is the official gateway to the language.

SCSS

.block {
  background: orange;
  border: 1px solid black;
}

.foo {
  text-align: center;
  Font-size: 1.3em;
}

Many of the examples you will see on other sites tend to favor the SCSS syntax and it is quickly becoming the default syntax for Sass as a whole.

What is a Gem?

The first problem a newcomer to Sass encounters is that Sass is not a commonly supported language; it needs to be installed. Going to the Sass site, the instructions are to install this thing called a ‘Ruby Gem’? A Ruby Gem is a library of code that is needed to perform an operation. This leads us to the second problem, Sass has a dependency on the Ruby language. For some, this can be a real issue. What if you’ve never used Ruby or don’t understand the command line? How can you use Sass without learning all of the developer stuff?

GUI Sass compilers

If you don’t want to bother with the command line process of using Sass, then read this short article about how to set up a GUI Sass compiler. The GUI compilers do the same thing as the command line, but you’ll never have to crack open terminal.

Once, you’ve got a GUI compiler installed, come back and learn about all the great features that Sass has to offer. You’ll be able to follow all the exercises, but you won’t have to touch the command line.

If you are comfortable with the command line and want to dive right in, continue on!

Installing Sass from the command line

Assuming you are on a Mac or Unix flavored machine with Ruby installed and running RVM (typical Ruby development environment configuration), the process is quite simple. Using the command line app, called Terminal, enter the following:

$ gem install sass

If you are running a Mac with the Darwin version of Ruby installed and not running RVM, there is a subtle difference.

$ sudo gem install sass

This command will require you to enter the admin password for that computer.

Macs come preinstalled with Ruby, but Windows does not. In order to get a setup like this going on Windows you may want to look at installing Ruby for Windows. Once the gem is installed, you have all that you need to start processing your Sass.

Your first processed CSS

Once Sass is installed, it’s primary role is to watch for updated Sass files and convert them to CSS.

For this exercise let’s create a folder on the desktop and call it sass-test-project. Inside that folder create two new folders, one called sass and the other stylesheets. Inside the Sass folder, let’s create a file called style.scss.

Going back to the command line, we need to do a couple of things. First, change directories so that you are inside the projects folder you created. The example would be:

$ cd Desktop/sass-test-project/

Then enter the following command to launch the Sass watching application.

sass --watch sass:stylesheets

What is this command doing? sass --watch is the base command, there isn’t anything to alter here. But the second part sass:stylesheets, these are the folders we just set up. Using this format, Sass will watch for any .scss file in the sass folder, process and create a new CSS file in the stylesheets folder.

And that’s it. Open your text editor, open the style.scss file and add a selector with some declarations like you would any other CSS file. Then save the edits. When you are done, go back into the projects folder, open the stylesheets folder and there will be style.css waiting for you with the newly processed SCSS into CSS.

Looking back at the command line application, you should see something like the following:

>>> Change detected to: /Users/[you]/Desktop/sass-test-project/sass/style.scss
  overwrite stylesheets/style.css
>>> Change detected to: sass/style.scss

It is important to understand what just happened here. Every time sass --watch is executed, Sass will destroy and overwrite the CSS file. If someone were to edit the CSS file without making the same edits to the Sass file, upon next compile all edits on the CSS file will be lost. The Sass files should be the single source of record for any CSS from here on out.

Error reporting

Looking back at the command line, not only is this great to see a log of updated files, but this is where you will see error reporting if there is a bug in your code. But don’t worry, you don’t have to keep a close watch on the command line, errors will also appear in your browser at the top of the view.

Sass’ error reporting isn’t all about alerting you that you did it wrong, it’s very informative as well. The report will tell you the file that has the error, the line number and hint as to what was incorrect.

Errors aren’t just on the surface either. As you get into a more complicated Sass file structure, the error reports the full stack trace so that you can dig deep into the issue.

Sass is NOT a Rails only tool

While there is a dependency on Ruby, in our first exercise we processed a SCSS file to CSS on our desktop. Be it Rails, PHP or .NET, there is no dependency on a development framework to use Sass.

In summary

As you hopefully have seen in this exercise, gettingSass installed has a few small hurdles to overcome but it is achievable. Either by using the command line or a GUI desktop app, getting Sass installed and processing your first CSS is an exciting experience. In our followup article, Exercises in basic Sass features, we will cover the essential features that makes Sass such an exciting alternative to vanilla CSS.

Author

dalesande

Dale Sande dalesande.com is a Senior UI Engineer at GettyImages in Seattle, WA. Organizer for the Seattle Sass Meetup @SassMeetup and creator/producer for SassCast. Dale prides himself as being the 'bridge' of communication between the designers and developers. Having a career background as a designer, print and web, Dale has successfully transitioned to developer and strives for solutions that reduces friction and increases communication.

  • http://www.css3files.com Christian Krammer

    Good starter, but I will never understand why so many people make an effort and use Ruby, the command line and all this complicated stuff to compile respectively run SASS. It’s so much easier with an App like Compass.app (http://compass.handlino.com/) that automatically compiles your SCSS files into CSS as soon as you save them. It’s so much easier to use, to setup and to configure. CodeKit is also a way like you mentioned in your article, but not everybody has a Mac and there are also people who like to use other code editors like Sublime Text 2 (http://www.sublimetext.com/) – which BTW also has plugins to compile SASS. However I prefer Compass.app since its easier to handle.

    • http://www.dalesande.com Dale Sande

      I won’t disagree that there are some great apps out there for processing Sass. At one time or another I have used most of the apps available, but the focus of this first article is to talk about the Sass language itself, how you install it and get up and running. Deep diving into each of the desktop apps are articles onto themselves.

    • http://dandenney.com Dan Denney

      I think it’s super important to actually learn how it works to avoid the “black magic” feeling as you work on things. This was a great explanation of that so that people can learn it and then grab an app to be more efficient.

  • http://jimbosveld.com jim

    Thanks for this! Nice intro into sass :)

  • Ewout

    There’s one question where I can’t have an answer for. Do you have to have to execute the –watch command every time the terminal has been closed, or does it remember which files to watch? Also, can I close the terminal while working with sass?

    • http://www.dalesande.com Dale Sande

      Yes, when you are using Sass my itself to simply process your CSS you have to start the ‘sass –watch sass:stylesheets’ process. It’s more or less like a mini server.

      It’s not discussed in this article, but using Sass with Compass can make this process simpler as well.

      Depending on what technology stack you are building your app/site on there are ways to automate this process. Be it Rails, Sinatra, .NET and PHP, there are a lot of really smart people out there trying to make this happen.

  • http://nuut-seo.fr Ben

    I still don’t take time to start a website project with sass but I’m sure it’s very useful. I bookmark your article. Thanks.