Some Compass examples

compass_examples

Some Compass <http://compass-style.org/> examples

┌──────────────────┐
│ NESTED SELECTORS │
└──────────────────┘

// SASS

#header
  background-color: blue
  border: thin solid black

  h1
    color: white

...compiles to:

/* CSS */

#header { background-color: blue; border: thin solid black; }
#header h1 { color: white; }

┌───────────┐
│ VARIABLES │
└───────────┘

// SASS

!base_color = #79c63f
!bg_color = #444
!border_width = 0.5em

body
  background-color = !bg_color
  text-color = !base_color

h2
  background-color = !base_color
  text-color = !bg_color
  border = !border_width "solid" !base_color

h3
  border = !border_width/2 "solid" !base_color

...compiles to:

/* CSS */

body {
  background-color: #444444;
  text-color: #79c63f;
}

h2 {
  background-color: #79c63f;
  text-color: #444444;
  border: 0.5em solid #79c63f;
}

h3 {
  border: 0.25em solid #79c63f;
}

┌─────────────────┐
│ MIXINS (macros) │
└─────────────────┘

// SASS

=text-shadow (!values)
  -moz-text-shadow= !values
  -webkit-text-shadow= !values
  text-shadow= !values

h2
  +text-shadow (0 0 0.4em white)

.foo
  +text-shadow (0 0 0.4em black)

...compiles to:

/* CSS */

h2 {
  -moz-text-shadow: 0 0 0.4em white;
  -webkit-text-shadow: 0 0 0.4em white;
  text-shadow: 0 0 0.4em white;
}

.foo {
  -moz-text-shadow: 0 0 0.4em black;
  -webkit-text-shadow: 0 0 0.4em black;
  text-shadow: 0 0 0.4em black;
}

┌──────────────────────────────────┐
│ FUNCTIONS FROM THE COLORS PLUGIN │
└──────────────────────────────────┘

// SASS

!base_color = #79c63f
!support_color = desaturate (lighten (!base_color, 15), 20)
!accent_color = saturate (darken (!base_color, 20), 25)
!bg_color = #444

body
  background-color = !bg_color
  color = !base_color

h1
  color = !support_color

.box
  border = "thin" "solid" !accent_color

...compiles to:

/* CSS */

body { background-color: #444444; color: #79c63f; }

h1 { color: #a5c78b; }

.box { border: thin solid #468f10; }

┌───────────────────────┐
│ MIXINS FOR FRAMEWORKS │
└───────────────────────┘

Where a grid framework like Blueprint or YUI forces you to contaminate
your HTML with presentational markup, Compass wraps them so that you can
use semantic classes and identifiers instead.

Using Blueprint directly:

<!-- HTML -->
<div class="container">
  <div class="span-24 last"><h1>Header</h1></div>
  <div class="span-16"><p>Content</p></div>
  <div class="span-8 last"><p>Sidebar</p></div>
  <div class="span-24 last"><p>Footer</p></div>
</div>

Wrapping Blueprint with Compass:

<!-- HTML -->
<div id="container">
  <div id="header"><h1>Header</h1></div>
  <div id="content"><p>Content</p></div>
  <div id="sidebar"><p>Sidebar</p></div>
  <div id="footer"><p>Footer</p></div>
</div>

// SASS

@import blueprint.sass

+blueprint

#container
  +container

#header, #footer
  +column(24, true)

#content
  +column(16)

#sidebar
  +column(8, true)

...which compiles to:

/* CSS */

#container { width: 950px; margin: 0 auto; overflow: hidden; display: inline-block; }
#container { display: block; }

#header, #footer { display: inline; float: left; margin-right: 0; width: 950px; }
* html #header, * html #footer { overflow-x: hidden; }

#content { display: inline; float: left; margin-right: 10px; width: 630px; }
* html #content { overflow-x: hidden; }

#sidebar { display: inline; float: left; margin-right: 0; width: 310px; }
* html #sidebar { overflow-x: hidden; }

...where the properties are what the respective original CSS contains
for classes named “container”, “span-16”, “last” etc.