Compass
Tim Riley
openmonkey.com
My perspective: non-designer wanting a predictable world and to be able to knock together some decent looking things.

#main {
width: 90%;
#main }
:width 90% #main p {
p border-style: solid;
:border-style solid border-width: 1px;
:border-width 1px border-color: #00f;
:border-color #00f }
a #main p a {
:text-decoration none text-decoration: none;
:font-weight bold font-weight: bold;
a:hover }
:text-decoration underline #main p a:hover {
text-decoration: underline;
}
Intro to Sass
Cleaner Syntax
Whitespace aware
Nested selectors

!main_bg= #46ar12
!main_width= 40em
#main
:background-color= !main_bg
:width= !main_width
.sidebar
:background-color= !main_bg + #333333
:width= !main_width - 25em
Variables

Sass Mixins
=blue-border
:border
:color blue
:width 2px
:style dotted
.comment
+blue-border
:padding 2px
:margin 10px 0
.reply
+blue-border
Define groups of CSS attributes and include them inline in any selectors throughout your stylesheet.
Mixins are like CSS macros, or ruby modules or abstract classes.

=outer-table-borders(!width = 2px, !color = black)
:border= !width "solid" !color
thead
th
:border-bottom= !width "solid" !color
tfoot
th, td
:border-top= !width "solid" !color
th
&:first-child
:border-right= !width "solid" !color
In the 2.1 (development) version of Sass, mixins can take arguments, which makes them much more flexible.

CSS Frameworks
To reiterate from before: Iʼm a non-designer looking to extend my predictable world of backend code to the frontend.

I want to avoid the browser compatibility nightmares.
The frameworks come from the people who know better than me.

So for me, CSS frameworks are a godsend. At the foundation, they are collections of CSS utility classes for you to include in your makrup. They can
help you avert the unpleasant surprises of browser compatibility. Found some traction especially for creating grid-based layouts.

.container.showgrid
%h2 Tests for common HTML elements
%hr
.span-8
%p Lorem ipsum dolor sit
%p Lorem ipsum dolor sit
.span-8
%p.small Lorem ipsum dolor sit
%p Lorem ipsum dolor sit
%p.large Lorem ipsum dolor sit
.span-8.last
.box
%p.last Aliquip ex ea commodo consequat
%blockquote
%p Lorem ipsum dolor sit
But! They pollute your markup with “display classes” - non-semantic class names.
Also, they are little more than just a collection of CSS classes, not a true framework (EXPLAIN)

Compass is a framework that combines Sass with these CSS frameworks - and much more - to make it easier to develop stylesheets for semantic
markup.

Framework Ports
Blueprint
960.gs
YUI
Compass includes ports of several frameworks to Sass: Blueprint, 960.gs & YUI.

+container !blueprint_grid_columns
+column(n, last) !blueprint_grid_width
+last !blueprint_grid_margin
+append(n)
+prepend(n)
+push(n) +blueprint-typography
+pull(n) +blueprint-form
These are not just Sass conversions - the frameworks enhanced these using mixins to provide a DSL that allows you to hook into the frameworks
and provide smenatic markup

.container.showgrid
%h2 Tests for common HTML elements
%hr
.span-8
%p Lorem ipsum dolor sit
%p Lorem ipsum dolor sit
.span-8
%p.small Lorem ipsum dolor sit
%p Lorem ipsum dolor sit
%p.large Lorem ipsum dolor sit
.span-8.last
.box
%p.last Aliquip ex ea commodo consequat
%blockquote
%p Lorem ipsum dolor sit

#page #page
%h2 Tests for common HTML elements +container
%hr +showgrid
#sales
%p Lorem ipsum dolor sit #sales
%p Lorem ipsum dolor sit +column(8)
#engineering
%p.small Lorem ipsum dolor sit #engineering
%p Lorem ipsum dolor sit +column(8)
%p.large Lorem ipsum dolor sit
#support #support
.testimonial +column(8, true)
%p Aliquip ex ea commodo consequat .testimonial
%blockquote +box
%p Lorem ipsum dolor sit %p
+last
With Compass it is easy to write unobtrusive stylesheets.

Compass Core Lib
• CSS Reset • Text replacement
• Sticky Footer • Link styling
• Clearfix • List styling (bullets,
orientation)
• Tag Cloud
• Table styling
• Cross-browser inline- (background colours,
borders)
block
Besides the big frameworks, Compass provides its own useful core library, which includes support for:
CSS Resets, Sticky Footers, Clear Fixes, Tag Clouds, Text Replacement, Link Styling, Table Styling

#app-suite-links
:float left
+horizontal-list
.tickets
+alternating-rows-and-columns(#ddffc8,#bbff91,#000)

Mix & Match
@import compass/reset.sass
@import compass/utilities.sass
@import blueprint/modules/colors.sass
@import blueprint/modules/grid.sass
Compass allows you to build your stylesheets efficiently insofar as you are never required to pull in all the libs or frameworks wholesale. You can
just pull in the parts that you want. Youʼre not confined to working with just one framework. It is easy to mix and match elements from each of these
framework ports and the core lib.

Installation
$ git clone git://github.com/nex3/haml.git
$ cd haml && sudo rake install
$ sudo gem install chriseppstein-compass
--source=http://gems.github.com/

Standalone Usage
$ compass -f blueprint project_dir
$ cd project_dir
$ compass -u # update the current project
$ compass -w # watch

Rails Integration
$ rails project_dir
$ cd project_dir
$ haml --rails .
$ compass --rails -f blueprint .

Sinatra Integration
gem 'haml', '~> 2.1'
require 'haml'
gem 'chriseppstein-compass'
require 'compass'
configure do
Compass.configuration do |config|
config.project_path = File.dirname(__FILE__)
config.sass_dir = File.join('views', 'stylesheets')
end
end
get "/stylesheets/screen.css" do
content_type 'text/css'
sass :"stylesheets/screen", :sass => Compass.sass_engine_options
end

http://github.com/chriseppstein/compass/
http://github.com/timriley/unfuddle-helpdesk