Sass

• Sass is a preprocessor for CSS that will help you fall in love with CSS all over again.
• Sass is written in Ruby and distributed via RubyGems.
• There are 2 syntaxes. Both work.
  • .sass = old
  • .scss = new, more common, just use it

Installing Sass

It's slightly different by platform, but essentially boils down to the following command:

gem install sass

Create a Sass project

Every valid CSS3 stylesheet is valid .scss. You can change the extension of an existing file to get rolling.

From your project directory run:

sass --watch style.scss:style.css

This will compile your .scss file into a .css file.

Compass

Compass is a collection of helpful tools and battle-tested best practices for Sass.

• Compass is a CSS authoring framework that uses Sass.
• Compass is written in Ruby and distributed via RubyGems.
• Compass is project aware. It helps manage images, scripts and fonts too..

Installing Compass

It's slightly different by platform, but essentially boils down to the following command:

gem install compass

Just getting started?

Install compass and Sass will be installed for you.

http://snugug.com/musings/installing-sass-and-compass-across-all-platform

Create a Compass project

Compass will create a project directory for you. If you’re creating a new Drupal theme…

cd sites/all/themes
compass create theme_name

This will create a directory called "theme_name" with subdirectories and a config.rb file.

Use Compass

Compass uses its own compiler. So now instead of

sass --watch style.scss:style.css

we now use

compass watch

Compass is now watching for changes and will compile when you save files with changes.

Compass Core

Compass provides a robust set of code patterns for re-use.

• CSS3: cross-browser mixins
• Typography: common typographic patterns
• Utilities: common style patterns

CSS3

Compass writes out CSS3 properties with browser fallbacks.

%message {
  @include border-radius(3px);
  @include box-shadow();
  border: 1px black;
}

.error {
  @extend %message;
  background: red;
}

.success {
  @extend %message;
  background: green;
}

.error, .success {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 2px 10px 2px #323232;
  -moz-box-shadow: 0 2px 10px 2px #323232;
  box-shadow: 0 2px 10px 2px #323232;
  border: 1px black;
  margin-bottom: 1em;
}

.error {
  background: red;
}

.success {
  background: green;
}

Typography

Compass ships with a very powerful (and slightly confusing) vertical rhythm system.

@include establish-baseline;
h1 {
  @include adjust-font-size-to(39px, 2);
  @include rhythm(0, 0, 0, 1, 39px);
}

html {
  font-size: 16px;
  line-height: 1.25em;
}

h1 {
  font-size: 2.4375em;
  line-height: 1.02564em;
  margin-top: 0em;
  padding-top: 0em;
  padding-bottom: 0em;
  margin-bottom: 0.51282em;
}

Utilities

Compass has some great utilities for text, lists, image replacement, and more.

nav {
  ul {
    @include inline-block-list(1em);
  }
}

#{headings(1,4)} {
  @include font-headers;

  a {
    @include link-colors(inherit, $hover, $active, inherit, $focus);
  }
}

nav ul {
  margin: 0;
  padding: 0;
  border: 0;
}

nav ul:after {
  content: "";
  display: table;
  clear: both;
}

nav ul li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
  white-space: nowrap;
  padding-left: 1em;
  padding-right: 1em;
}

h1, h2, h3, h4 {
  font-family: Georgia, serif;
  font-weight: 400;
}

h1 a, h2 a, h3 a, h4 a {
  color: inherit;
}

h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited {
  color: inherit;
}

h1 a:focus, h2 a:focus, h3 a:focus, h4 a:focus {
  color: #448087;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover {
  color: #448087;
}

h1 a:active, h2 a:active, h3 a:active, h4 a:active {
  color: #141414;
}

Compass Extensions

Compass extensions allow for the inclusion of stylesheet libraries, templates, patterns, and more.

My current favorites

• Breakpoint: Really Simple Media Queries
• Singularity: Grids Without Limits
• Sassy Buttons: Beautiful buttons
• Toolkit: your swiss army knife for Progressive Enhancement and Responsive Web Design

Using Compass Extensions

                gem install {extension}
              

                require '{extension}'
              

                @import '{extension}'
              

Breakpoint

Set breakpoint variables and do amazing things!

// Your basic media queries, min-width and min/max width, are super easy!
$basic: 543px;
$pair: 456px 794px;

#foo {
  content: 'No Media Queries';

  @include breakpoint($basic) {
    content: 'Basic Media Query';
  }

  @include breakpoint($pair) {
    content: 'Paired Media Query';
  }
}

Singularity

A ratio based grid framework that helps you leave 960 in the dust! Works well with Breakpoint too.

$grids: 12;
$grids: add-grid(2 8 2 at $desk);
$gutters: 1/3;

article {
  @include breakpoint($desk) {
    @include grid-span(8, 3);
  }
}

aside {
  @include breakpoint($desk) {
    @include grid-span(2, 1);
  }
}

Sassy Buttons

button {
  @include sassy-button("shiny", 15px, 26px, #ffd71a, #ffaa1a);
}

Toolkit

Toolkit bundles a bunch of useful responsive tools into one, well… toolkit.

• Border Box
• Fluid Media
• Progressive Enhancement
• Clearfix
• Vertical Center
• Color Functions
• other stuff