Lets get Sassy

We all know coding emails can be a laborious task, repeating multiple lines of code over, and over. This is where Sass comes in.

What is Sass?

To quote the Sass website:

Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

So, basically, Sass is a great way of writing a more terse and functional way of writing CSS.

If you're still unsure on whether to use it or not, read up more on the Sass website

Examples of Sass in action

Ever got bored of writing this over and over again?

<a href="#" style="color:#FF0000; text-decoration:none; font-weight:bold;">click here</a>

Much easier in Sass:

/* scss */
a {
    color: #FF0000;
    text-decoration: none;
    font-weight: bold;
}

<!-- markup -->
<a href="#">click here</a>

Yeah, we've all used CSS before, show me a real example! The above example is great if you're using just one link style, but what if you have multiple lines of code like this?

<a href="#" style="color:#FF0000; text-decoration:none; font-weight:bold;">click here</a>
<a href="#" style="color:#0000FF; ">click here</a>

This is where nested sass comes into play;

/* scss */
a {
    &.red {
        color: #FF0000;
        text-decoration: none;
        font-weight: bold;
    }
    &.blue {
        color: #0000FF;
    }
}

<!-- markup -->
<a href="#" class="red">click here</a>
<a href="#" class="blue">click here</a>

What about some Sass variables?

$font-paragraph: Arial, sans-serif; // Paragraph font family

span {
    font-family:$font-paragraph;
}

Trust me, this is a very quick example but I don't want to use it all up now!

Installing everything you need

First off, we're going to install Compass. Compass is a collection of helpful tools and battle-tested best practices for Sass. The main feature we're using it for is that it can "watch" your Sass files and automatically compile them.

To use Compass you're going to need Ruby installed on your machine. If you’re on OS X; Ruby is already installed (great!). If you’re working on a Windows machine you can grab RubyInstaller for Windows. Be sure to check the “export Ruby executables to PATH” box when installing.

Now we can install Compass. So let’s open up a Terminal (CMD on Windows).

On Windows:

gem install compass

On OS X

sudo gem install compass

Great, now we have Compass installed! Next up we'll need premailer, premailer is an awesome tool that will inline your compiled CSS for you.

Head back to the Terminal (CMD on Windows) and type this in:

gem install premailer

Then, in your project folder (set a new one up for this) open a plain text file and put this in it and save it out as inline.rb

require 'rubygems' # optional for Ruby 1.9 or above.
require 'premailer'

premailer = Premailer.new('templates/email.html', :warn_level => Premailer::Warnings::SAFE)

File.open("inlined/email.html", "w") do |fout|
  fout.puts premailer.to_inline_css
end

premailer.warnings.each do |w|
  puts "#{w[:message]} (#{w[:level]}) may not render properly in #{w[:clients]}"
end

This takes the email titles email.html from the templates folder, inlines the CSS and outputs it to the inlined folder. It'll also output any CSS warnings

Final step, open up a new Terminal window and navigate to your project like so (obviously change it out to where you've saved it):

cd Desktop/YourFilePath

And then type:

compass watch

If it's all worked, you should see the following:

>>> Compass is polling for changes. Press Ctrl-C to Stop.

Congratulations, we're ready to get started!

NOTE: When you are ready to inline your code you go to the terminal again and type

ruby inline.rb

Start writing Sass

Set up a sass file by opening a new file in your IDE of choice and save out email.scss this will automaticall compile to email.css

Lets make a Sass grid to make your email life easier, we'll make a simple two column stack.

First, lets write the table structure in plain ol' HTML:

        <table border="0" cellpadding="0" cellspacing="0" class="full-width" style="width: 640px">
          <tr>
            <td>
              <table border="0" cellpadding="0" cellspacing="0" class="full-width">
                <tr>
                  <td align="center" valign="top">
                    <table border="0" cellpadding="0" cellspacing="0" class="full-width mobile-stack">
                      <tr>
                        <td align="center" class="mobile-stack" valign="top">
                          <table align="left" border="0" cellpadding="0" cellspacing="0" class="two-col">
                            <tr>
                              <td>Column 1</td>
                            </tr>
                          </table>
                        </td>
                        <td align="center" class="mobile-stack" valign="top">
                          <table align="left" border="0" cellpadding="0" cellspacing="0" class="two-col">
                            <tr>
                              <td>Column2</td>
                            </tr>
                          </table>
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>

And the Sass for it:

.full-width {
  width: 640px;
  @media only screen and (max-width: 600px) {
    width:100% !important;
    height:auto;
  }
}
.two-col {
  width: 320px;
  @media only screen and (max-width: 600px) {
    width:100% !important;
    height:auto;
  }
}

  *[class="mobile-stack"] {
    display:block !important;
  }

Getting technical with Sass

I mentioned before about Sass variables, we can also use calculations. With that in mind, lets refactor the grid above to allow for easy changes. We're also going to make it auto calculate the width of the columns!

The HTML stays the same, the Sass is where we're going to have some fun.

First, lets set up a new variable for our overall email width:

$email-width: 640px;

So now we change our .full-width class as follows:

.full-width {
  width: $email-width;
  @media only screen and (max-width: 600px) {
    width:100% !important;
    height:auto;
  }
}

Awesome! Now we can change our width in a handly place! Next up, lets set up a variable for our .two-col class to calculate the widths automatically as follows

$two-col-width: ($email-width)/2;

And change our class to:

.two-col {
  width: $two-col-width;
  @media only screen and (max-width: 600px) {
    width:100% !important;
    height:auto;
  }
}

Hopefully, you can see what we've done here. Basically; we only need to change the variable for email-width and that'll auto construct the grid for you. Bonus points for setting up more grid widths:

$three-col-width: ($email-width)/3;

DON'T FORGET:

When you're done you need to open a terminal and type:

ruby inline.rb

To inline the CSS.

Further learning

Obviously, this is only a very basic introduction.

If you have any questions you can follow me on Twitter.

If you want to see a fully functional Sass template in action here is my GitHub project