Now for the second installment in a series of posts I’m calling “The Sass Way” (#TheSassWay). There are clear ways to do things using vanilla CSS, but there are significantly different ways for writing CSS stylesheets using Sass. With any luck, these posts will get broken out into its own blog, when, and if ever, I get around to doing that.

Until then …

Let’s install Sass and Compass

Sass and Compass get installed as Ruby gems so you’ll need to have Ruby on your machine. I’d love to go into that here, but it’s beyond the scope of this article. Hit up the mailing list if you need help finding the right resources for getting Ruby on your machine.

Ok, first thing’s first. Let’s install Sass. Open up your Terminal.app and type:

gem install compass

Ok, I know what you’re thinking. I just said that we are going to install Sass, but I just told you to install Compass based on that directive. The truth is, Compass requires Sass and when you run that command you should see something like this:

$ gem install compass
Fetching: sass-3.1.3.gem (100%)
Fetching: compass-0.11.3.gem (100%)
Successfully installed sass-3.1.3
Successfully installed chunky_png-1.2.0
Successfully installed fssm-0.2.7
Successfully installed compass-0.11.3
4 gems installed

If that’s not what you saw when you ran that command, you may not have Ruby or Ruby Gems on your machine. Also, depending on your setup, you may need to install gems under sudo. Covering this in detail is a bit beyond where I want to go in this post, so seek help at the mailing list if you encounter any issues.

If you are intimidated by the command line, dont’ be. There is Compass.app, but I won’t be covering that in this post.

I also like to install css_parser to take advantage of all the features of compass stats which outputs statistics of my Sass stylesheets. It outputs a report that gives a count of the Sass rules, properties, mixins defined and mixins used as well as the CSS rules and properties that get output from your Sass-stylesheets.

Run this command to install css_parser

gem install css_parser

Now you are ready for some hardcore Sass and Compass action!

Let’s create a test project

The easiest way to get started with something new is to just jump right in. On that note. Head to the place you store you codes (or where ever you’d like to store this test project) and run this command.

compass create sass-test

Alternatively you can pull down the test project from GitHub, but that would completely defeat the purpose of learning how to do this on your own.

Moving on … change directory (cd) into the newly created /sass-test directory and open it up in your favorite editor. I use TextMate, but I’ve been contemplating trying out Vim or Sublime Text 2. We’ve covered Vim quite a bit on The Changelog, so take a peek at the search results for Vim on The Changelog and dig in.

Compile Sass to CSS

This is the easiest part. Sass and Compass does all the hard work, so run this command and let Compass do its thing.

compass watch

You should see something like this if you’ve done well with following along.

$ sass-test git:(master) compass watch
FSSM -> An optimized backend is available for this platform!
FSSM ->     gem install rb-fsevent
>>> Compass is polling for changes. Press Ctrl-C to Stop.

If that’s the case go ahead and let out a loud “yee” and pat yourself on the back because you are now ready to start writing your CSS … The Sass Way!

The compass watch command does exactly what you would think it would do – it watches your Sass files for changes (saved changes) and automatically compiles your Sass to CSS. How does it know where the Sass is and where the CSS should be compiled to? That’s a great question, and one that I’ll cover in more detail in a future post titled “Configuring Compass”.

In the meantime, take a look at config.rb located in the root of our sass-test project. The Compass configuration is essentially the brain of Compass and defines a number of variables letting Compass know where your Sass, CSS, images and JavaScript files are located, what extensions to require, what syntax you prefer, the output style and much more.

Let’s write some Sass

Ok, before we actually write some Sass, it’s important to know that Sass has some history to it. In fact, one of the hardest things to grasp is that Sass actually has two syntaxes – and that’s often what either confuses or intimidates people and deters them from even giving it a try. How do I know? Because that’s exactly how I felt BEFORE I bit the bullet and took the proverbial plunge. But let’s not get off track here.

Sass is like CSS. Ok, that’s misleading. Sass CAN BE like CSS. I mentioned that Sass has some history to it and actually has not one, but two syntaxes. One of the syntaxes is even named “Sass” which adds even more confusion to the mix. The main syntax is referred to as “SCSS” (for “Sassy CSS”) and is new as of Sass 3. The older syntax (part of that history I mentioned) is referred to as the indented syntax (or just “Sass”).

Now that we’ve covered a bit of the history of Sass and the fact that it has two syntaxes, I believe we are ready to write some code. Or should I say SCSS – because the SCSS syntax is like CSS and was designed to be a superset of CSS3′s syntax. This means that every valid CSS3 stylesheet is valid SCSS. In fact, you can copy the contents of a CSS file and paste it into a SCSS file and Sass will compile it to clean CSS.

Let’s test out this “theory” and copy the contents of my screen.css file from this blog and paste it into screen.scss in our test project and run compass compile. Take a look at screen.css now and you’ll see that Sass and Compass have compiled that compressed un-readable CSS to readable, perfectly indented CSS along with comments of where the code came from for debugging purposes.

Conclusion and upcoming

This example is obviously not the most practical example, and we technically didn’t write any code. I just wanted to prove a point that there can be next to zero effort transitioning to Sass and Compass because you just did it. The next step is taking advantage of the features of Sass and Compass now available to you, when you choose to use them. That’s the best part of this transition. You can incrementally step into what Sass and Compass have to offer. There’s no reason to be intimidated or feel that it will “take weeks” to do. Do it. Do it now.

In the coming weeks I’ll be covering more topics on writing CSS “The Sass Way”. Follow me as well as The Sass Way on Twitter for updates.

This is the first in a series of posts in the works I’m calling “The Sass Way” (#TheSassWay). There are clear ways to do things using vanilla CSS, but there are significantly different ways for writing CSS stylesheets using Sass. With any luck, these posts will get broken out into its own blog, when, and if ever, I get around to doing that.

Until then …

Let’s get started

If you’ve been using Sass for any length of time, then you’re likely to be familiar with being able to reference parent selectors using the & character. A simple example might be something like this:

Sass:

h3
  font-size: 20px
  margin-bottom: 10px
  &.some-selector
    font-size: 24px
    margin-bottom: 20px

CSS (output):

h3 {
  font-size: 20px;
  margin-bottom: 10px;
}
h3.some-selector {
  font-size: 24px;
  margin-bottom: 20px;
}

Pretty neat huh, how we didn’t have to write out the h3 again. With Sass all we have to do is nest the next ruleset and attach the & in place of the repeating selector and we’re golden.

Wait. There’s more.

This is something I stumbled onto today while working with some Sass written by my bud Wynn Netherland. Though, I don’t see this mentioned in the Sass documentation. You do read documentation don’t you?

So, what if I wanted to style all my h3 headings a certain way, but for this one h3, that is also a child of a certain selector, I want to style it slightly different than the others? Well, with CSS we know how that goes, we’d have to write it all out. Verbose. Bah …

But with Sass … what options do we have? Check this out …

Sass:

h3
  font-size: 20px
  margin-bottom: 10px  
  .some-parent-selector &
    font-size: 24px
    margin-bottom: 20px

CSS (output):

h3 {
  font-size: 20px;
  margin-bottom: 10px;
}
.some-parent-selector h3 {
  font-size: 24px;
  margin-bottom: 20px;
}

Based on this code, you can place an & at the end of your selector declaration in place of the repeating selector, and sit back and enjoy the awesomeness of Sass.

My example, is very simplistic but Joel Oliveira goes deeper on the subject with his post “The ampersand & a killer Sass feature“. I highly recommend it.

In the coming weeks I’ll be covering more topics on writing CSS “The Sass Way”. Follow me as well as The Sass Way on Twitter for updates.

Hello RVM

RVM is a tool that makes it super easy to install, manage and work with multiple versions of Ruby, interpreters and sets of gems. For example, with RVM you can have 1.8.7 and 1.9.2 live together without any issues. You can even swap back and forth from 1.8.7 to 1.9.2 as you see fit.

RVM Gemsets using .rvmrc

RVM’s gemset feature allows you to completely separate your various development environments on a per project basis. This makes gem conflicts a lot less common and makes it very easy to get a handle on the gem dependencies of your project.

To take advantage of RVM’s gemset feature in your project, all you need to do (besides having RVM installed) is add an .rvmrc file to the root of your project and set the ruby and gemset.

Here’s an example (as seen here):

rvm use ruby-1.9.2@sinatra-bootstrap

When you navigate into the project for the first time after adding the .rvmrc file you will get a notice to trust the file. Trusting the file means that whenever you cd into this directory, RVM will run this .rvmrc script in your shell. This is a good thing because we can use this to tell RVM to use a specific Ruby and gemset for this project. We can also check it into the project’s repo so that everyone using the project can have the same setup.

So for all new projects you can start checking in an .rvmrc file to make your life, and the developers working with your code, much easier!

Examples in practice

When you first start out, your gemset will be empty except for a copy of Rake. If you want to test this out run gem list to see what’s in your gemset. Also, an important note to make is that RVM doesn’t create the gemset for you, it just tries to use it upon execution of the .rvmrc file. You’ll need to create the gemset in the Ruby you want to use in order to use it.

For example, if our .rvmrc file was set to use ruby-1.9.2 and the gemset rvmrc-test but the gemset wasn’t created, we’d get an error like this:

ERROR: Gemset 'rvmrc-test' does not exist, rvm gemset create 'rvmrc-test' first.

We’d need to run this command first before we can use our new gemset.

rvm gemset create rvmrc-test

If you run this command, RVM will create the new rvmrc-test gemset and it should also show that you are now using ruby-1.9.2@rvmrc-test. Now you’re in gear to use your new gemset and add the gems you need for your project without any concern of conflicting with another project’s gems.

RVM Best Practices

It should also be known that what I covered here in this post is listed in the RVM Best Practices.

But there’s no reason to be sad. I started a new podcast called Founders Talk on Dan Benjamin’s internet broadcast network 5by5.

For most, the news of me starting Founders Talk on 5by5 is kinda old news (It was started October 2010). As for The Web 2.0 Show, in all honesty that show has been retired for quite a while now. I just haven’t been the best steward of this blog or the show’s site to let folks know. The last show was produced in April 2010 and featured Neil Patel of KISSmetrics.

So, what’s going to happen to the show’s website and archives?

Nothing. The show’s website and archives will remain online and freely accessible forever.

The Web 2.0 Show came online in 2005 and produced over 75 episodes – with guests like Andrew Mason of Groupon.com, Mike McDerment of Freshbooks, Eric Ries of Startup Lessons Learned as well as many more awesome guests.

Moving forward with Founders Talk

Hopefully what you loved most about The Web 2.0 Show will live on in Founders Talk. I extracted what I loved most about The Web 2.0 Show, conversations with Founders, and pulled that into Founders Talk. I also didn’t want to be too niche and “technology” focused. Listen to The Changelog, another podcast I produce, for a more tech focused podcast and blog. Founders Talk focuses less on the technologies being used and more on the story of the founders and how things got started. Sure, technology is still brought up, but the focus of the conversation is on their story, history, fails, successes, lessons learned, advice, etc. I also knew that there would come a day when the term “Web 2.0″ would no longer hold its value and would ultimately reflect poorly on the topics and content of the podcast.

I want to thank all of you who have listened to my podcasts and have supported me over the years.

A really convenient feature of Drobo is the ability to setup email alerts from Drobo Dashboard, a powerful companion utility application that shows you what Drobo is up to and adds important functionality including alert emails, data usage visualization and more.

If Drobo wants your attention or wants to alert you of something critical happening it can be configured to send you an email. Well, if you are like me and you use Google Apps (or Gmail) as your email solution, you might need to know how to configure Drobo Dashboard to do this.

Here’s a quick guide to get you up and running.

Getting Started

Get started by selecting “Email Settings” from the Drobo Dashboard menu. Then all you need to do is follow the steps below to get your setup configured for email.

Drobo Dashboard can send messages on all useful information, when a situation is important, or on critical situations only. Personally, I prefer the middle ground, which happens to be the default setting. You have the freedom of using any address you’d like, but I prefer have my alerts to my regular email address. The “sender” can be set to anything you’d like, but I think Google apps defaults it to your email address regardless of what you have set. At least that’s what I’m seeing happen.

All email messages will be sent from Google, but you can send to any email account. Use these steps regardless of who you are sending to.

Configuring Google Apps and Gmail

1. Enter the email address you want the alerts sent to as the “To” email address
2. Enter anything you’d like as the “From” email address
3. Enter “smtp.gmail.com” as the “Mail Server”
4. Enter “587″ as the “Port”
5. Check the “Authentication” box
6. Enter your valid Google Apps or Gmail address as the “Username”
7. Enter your valid Google Apps or Gmail password as the “Password”
8. Check the “Use SSL” box

If you want to test this out before selecting “OK”, click “Send Test E-mail” to make sure everything works as expected. If you get the test email alert, you’re golden! Click “OK” and you’re done.

When I installed Chrome on my MacBook Pro, Firefox was my primary browser. During the installation process of Chrome, you are asked if you want to import bookmarks, history, etc from another browser. I said yes to copy over my bookmarks and history from Firefox. This gives you the power of Google search on your browsing history.

This isn’t really anything “new”, other browsers have been doing history and providing search on your history for ages, but not with this type of interface, speed or accuracy! I was able to go back as far as Sunday – September 20, 2009. I just opened Firefox to confirm the depth of the history settings (waited 30 seconds for it to open) and it seems they took that level of control away. Now, it seems, you only have the choice of recording or not recording history. My guess is the range is something like 90 days. Oh well.

A useful hotkey (Cmd + Y) opens the Chrome history manager where you get complete information on your browsing history.

Keep in mind that the History page doesn’t store pages from secure websites, those you’ve visited in incognito mode, or those you’ve deleted from your browsing history.

Rakefile features:

• Clear and generate tasks that clear and generate new styles (via Compass)
• Preview, build tasks that preview and build the StaticMatic site using the default StaticMatic commands (I hate typing staticmatic over and over and over…)
• Deploy task using Rsync that clears the styles, generates new styles, builds the site, and finally deploys the site using Rsync

I also created a StaticMatic-Bootstrap that you are welcome to “watch” or “fork” on GitHub.

It supports: Haml, Sass, Compass and jQuery out of the box and comes with said Rakefile noted in this post.

Laziness is a trait of a good developer.

When I started to use WordPress again, I WAS NOT excited about using the FTP protocol to ship off changes to my theme. I wanted a simple and easy use process to deploy updates to my theme and also automate a few processes that I needed to support as part of using Sass and Compass to create my CSS styles.

What’s the alternative? FTP? Nope. Typing the rsync command by hand each time? Nope again.

This is a simple Rakefile I wrote that helps me to do all this in simple and concise manner.

Features:

• Clear and generate tasks that clear and generate new styles (via Compass)
• Deploy task that clears the styles, generates new styles and finally deploys the theme using Rsync

ssh_user = "user@domain.com" # for rsync deployment
remote_root = "~/path/to/remote/" # for rsync deployment

namespace :styles do
  desc "Clear styles"
  task :clear do
    puts "*** Clearing styles ***"
    system "compass clean"
  end
  desc "Generate styles"
  task :generate => [:clear] do
    puts "*** Generating styles ***"
    system "compass compile"
  end
end

desc "Clears the styles, generates new ones and then deploys the theme"
task :deploy => 'styles:generate' do
  puts "*** Deploying the site ***"
  system("rsync -avz --delete . #{ssh_user}:#{remote_root}")
end

It’s 21 lines and simple to use. Besides, rake deploy is much better than what most WordPress users are doing to deploy updates to their theme. Capistrano could work too, but IMO would be over-kill. Rsync is a much better fit, and using the --delete option ensures that you delete files that don’t exist on the sending side. Keeps it simple and clean.

This Rakefile is a bit opinionated and assumes you’re using Sass and Compass.

I love Whuffie (The Whuffie Factor / Amazon) and all that it represents. I loath and detest liars, thieves and those who choose to be dishonest and take for granted another person’s trust in them.

This is my humble little blog. It is a place that I will share my current thoughts on the web, new media, society and sometimes life. These thoughts may appear in the form of links, pictures, audio, video or whatever “media” I decide to share with the world. Because I’m reluctant to share too much of my personal life with the general public, this blog will mostly contain my personal perspective on my professional life.

I run Handcrafted and I produce two podcasts, The Web 2.0 Show and The Changelog. Wynn Netherland and I produce The Changelog together and it’s been a work in progress – evolving each and every day since we started it back in November 2009.

If you have feedback or would like to get in touch with me, email me at adam [at] myfullname [dot] com.

Please enjoy!

Thanks!