Introduction to Sass

Jul 9, 2012
CSS
123 Shares
By

I recently completed a seven part series on Learning LESS, and we had a lot of commenters who requested a similar series on Sass (Syntactically Awesome Stylesheets). While there is a lot of discussion out there as to whether or not LESS or Sass is better, both have their place, both accomplish the same overall goal, and both can make your life (and your coding) much simpler and easier.

What is Sass?

Sass, which stands for Syntactically Awesome Stylesheets, is a “meta-language on top of CSS that’s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows. Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets” (from sass-lang.com).

There are several different ways to harness the true power of Sass, and I’ll do my best to cover each method. But basically, it’s commonly thought that Sass is a server side compiled language using Ruby (as opposed to LESS, which is a JavaScript library and thus compiled client side). Sass can however be compiled locally and then uploaded to your server or your website via FTP just as you would any other CSS stylesheet. Many people use CodeKit for this compiling, and we’ll cover that in a later post.

Installing Sass

Sass runs on Ruby. If you’re using Mac OS X, you already have Ruby installed (lucky you!). If you are on a Windows machine, you can install it using the Windows Installer. I’ll proceed with this tutorial as if you’re running Mac OS X.

First, fire up Terminal. If this little black box scares you, don’t worry. I was always very intimidated by working in the Terminal, but after following some tutorials, working with Ruby and Git, you get to be more comfortable.

[WARNING: Working in the Terminal gives you access to seriously mess up your computer. Be cautious about command lines you run in the Terminal.]

The first command you’ll want to type into the command line is to check and see what version of Ruby you’re running. To check, run this command

ruby -v

Once you click enter, the Terminal should tell you which version of Ruby you are running. If you see something like this, you’re ready to rock with Sass.

As you can see, as of this post, my version of Ruby is 1.8.7, which will work just fine for Sass. Now that we know we have Ruby, let’s install Sass.

You can install Sass by running this command

gem install sass

Click enter and the Sass install will begin. This process will take just a minute or two.

[Having trouble? If you got an error message saying you don’t have privledges to write to the Ruby directory, you’ll have to install Sass with the sudo command. Simply type sudo gem install sass and it should work for you.]

If all things go successfully, you should see this message.

And that’s it! Sass is now installed on your computer and you’re ready to start writing some Syntactically Awesome Stylesheets. Can we also pause a minute to just look at how awesome of a word ‘syntactically’ is? Just rolls off the tongue.

Writing your first Sass

The standard extension for the latest version of Sass is .scss (this is as of Sass 3). The .scss extension is completely valid CSS (just like LESS is), so you can write standard CSS while mixing in your own Sass as well. Fire up your code editor and let’s write some Sass (I use Coda 2 which has a default color profile for .scss syntax and it comes in handy).

The code shows some variables and a paragraph declaration. Don’t worry about the syntax now as we’ll cover variables, mixins, nesting, selector inheritance and much more in later posts. For now, we’re still focusing on getting Sass to work with .scss files and the Terminal.

/* Sample Sass */
$blue:		#00214D;
$font-size:	16px;

p {
	color: $blue;
	font-size: $font-size;
}

Looks pretty simple so far, right? Now let’s jump back into the Terminal and get Sass to watch the file. Make sure you’re in the same directory as the file you just saved (I saved mine to my Desktop). To check and see what folder you are in, simply type

ls

in the command line and it will list all of your files and folders.

To change directories, simply type

cd

and then begin typing your location and press tab. Terminal will auto finish the folder. Run the command, then type

ls

again to confirm you’re in the correct directory.

Once you’re in the same directory as the .scss file you just created, we’ll tell Sass to watch the file and to translate it into a .css file. Once Sass is watching the file, any changes you make to the .scss file will automatically be updated in the .css stylesheet. The command for getting Sass to watch the file is

sass --watch sample-sass.scss:sample-sass.css

Sass will then tell you that it is watching for changes and automatically create a CSS file in the same location as your .scss file.

What’s Next?

Now you’re up and running with Sass, you can start writing some sassy code. In future articles, I’ll walk you through the syntax and the thought process behind planning out your code to be extremely efficient, and also showcase CodeKit (which replaces the need to work in the Terminal) when using Sass. We will also dive into Compass as well.

Have questions? Leave them in the comments below and I’ll answer them! Thanks for reading.

Author: Alex Ball
Alex has been working in web design and development for over five years, and loves learning and expanding his skill set. A fan of CSS3 and HTML5, he also enjoys going old school with HTML (table) Emails.
  • http://webcreatorbox.com Webクリエイターボックス

    SASS plugin for Coda is also very useful! http://www.webcreatorbox.com/en/tech/css-sass/

  • http://websitedevelopmentarticles.blogspot.com/ website development blog

    It seems Sass may be considered boon to all those web designers as they not only make the web design attractive but also will help us to build a website which seems to be more interactive in nature and even search engines seems to be giving top priority to those website prepared using CSS for the fact that they decrease the loading time of the website.

    • tnt

      bravo for making no sense

  • Shiva

    Thank You for Posting this blog.. it is really useful.

  • http://twitter.com/AlexBall12 Alex Ball

    CMD Window and Terminal does need to be open if you’re using it to watch the directory with the command line.

    If you’re using CodeKit, the Terminal / CMD Window can be closed.

    The speed issues are interesting, are you using anything else with the Sass (like Foundation or Blueprint or any other framework?)

  • http://www.oceaninfosoft.com/ Mobile Application Development

    Very useful post I really appreciate it…keep up the good work. Thanks!

  • Johnsonedwardk

    Thank You

    The given information is very effective
    i will keep updated with the same

    web services