Simplify CSS Development
with Sass & Compass

Alex Lemanski (@bitfyre)
Trilogy Interactive

I Was a Sass Hater

* Until about 2.5 years ago * Nov 2009 * The Change Log episode 0.0.1 * Nathan Weizenbaum & Chris Eppstein

The Basics

Variables

$font-color:      #3B3330;

$sans-family:     Helvetica, FreeSans,  ↵
  "Nimbus Sans L", Arial, sans-serif;  ↵

$fancy-sans-family: "dejarip-1",  ↵
  "dejarip-2", $sans-family;

h1 {
  font-family: $fancy-sans-family;
  color: $font-color;
}

Setting a Default Variable Value

$font-size: 12 !default;

Nesting selectors

.nav {
  font-family: $sans-family;
  ul, ol {
    list-style: none;
    list-style-image: none;
  }
}

Parent References

.nav {
  …
  a {
    &:hover, &:focus {
      color: $link-hover-color;
    }
  }
}

Nesting statements

background: {
  color: $nav-bg-hover;
  image: url("nav-bg.png");
  repeat: no-repeat;
}

Comments

/*  Standard CSS style Comment
    It will show up in the CSS */

// Sass comment.
// This will not show up in the CSS.

Tools

Commandline

• Sass itself
• sass-convert
• Vast Number of static site Generators
  • Middleman (My personal Favorite)
• Compass

Debugging Tools

• Generated Line Comments
• FireSass for Firebug

But Don't You Get
@#$% Like This

html body > section > header  ↵
  {color: green;}

html body > section > header > article  ↵
  > header {color: purple;}

Just Don't Do It!

Follow Some Good Practices CSS

• Don't nest more than 4 selectors deep
• Break things down as much as possible
• Work from the main area of content or interaction out

It's just a tool doing whatever you tell it too!

Two Syntaxes?

What's that all about?

A Bit More Complex

Working with Multiple Files

site.scss, site.sass
site.css.scss, site.css.sass

Store in a ./lib Sub-directory of the Sass files

Partials start with an underscore e.g. _nav.scss
and are imported in the following way

@import "lib/nav";
@import "nav";

Mixins

@mixin wrap($wrap-width) {
  margin: 0 auto;
  overflow: hidden;
  text-align: left;
  max-width: $wrap-width;
}

#wrapper {
  @include wrap(960px);
}

Selector Inheritance

.clearfix { 
  …
  &:after {
    …
  }
}

.main {
  @extend .clearfix
}

Branching/Conditionals/Etc.

From the Compass Project

Some other Control Directives available

@for
@each
@while

Functions

$base-font-size: 12 !default;

@function pxs2ems(  ↵
  $px: 0,   ↵
  $context: $base-font-size
) {

  $ems: ($px / $context) * 1em;
  @return $ems;
}

h1 {
  font-size: pxs2ems(24, 12);
}

• Supports Various Math operations
• Converts Between Units automatically whenever it's possible

Hit CSS with the Pretty stick

Output styles

:nested

:expanded

:compact

:compressed

Other Useful Output Configs

:line_comments => true,
:debug_info => true

CMS Integration

…Just upload the compiled CSS

What is Compass?

Helping Cut out the
Cruft from your code

CSS3 Helpers

Just about everything under the Sun.

Plugins

Sassy Buttons

Questions?

Thankyou!

Alex Lemanski
@bitfyre | email

This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.