i = 1

class Book < ActiveRecord::Base

end

class Book
  include ActiveModel::Validations
end

$ rails g controller foos index

$ rake db:migrate

$ cap deploy

.foo
  .bar
    .baz
      font-weight: black
    .two
      font-weight: 100

.foo {
  .bar {
    .baz {
      font-weight: black;
    }
    .two {
      font-weight: 100;
    }
  }
}

.foo {
  .bar {
    .baz {
      font-weight: black;
    }
    .two {
      font-weight: 100;
    }
  }
}

.foo .bar .baz {
  font-weight: black;
}
.foo .bar .two {
  font-weight: 100;
}

$width: 5em;

#main {
  width: $width;
}

$width: 5em;
$margin: 2em;

#foo {
  width: $width + $margin;
}

NXT: css

.foo {
  width: 7em;
}

.foo {
  color: rbg(255,0,0) + rgb(0,255,0);
}

.foo {
  color: rgb(255,255,0);
}

.foo {
  color: darken(#fff, 10%);
}

.foo {
  color: #e6e6e6;
}

.foo {
  color: transparentize(#fff, 0.5);
}

.foo {
  color: rgba(255, 255, 255, 0.5);
}

.foo {
  font-family: sans + "-serif";
}

.foo {
  font-family: sans-serif;
}

@mixin simpleborder {
  border: 1px solid black;
}
.foo {
  @include simpleborder;
}

.foo {
  border: 1px solid black;
}

@mixin stdborder($width: 1px) {
  border: $width solid black;
}
.foo {
  @include stdborder(2px);
}

.foo {
  border: 2px solid black;
}

.error {
  color: red;
}

.seriousError {
  @extend .error;
  font-weight: bold;
}

.error, .seriousError {
  color: red;
}
.seriousError {
  font-weight: bold;
}

.error.validation {
  color: yellow;
}

.error, .seriousError {
  color: red;
}
.error.validation, 
.seriousError.validation {
  color: yellow;
}
.seriousError {
  font-weight: bold;
}

p {
  @if 1 + 1 == 2 { border: 1px solid; }
  @if 5 < 3 { border: 2px dotted; }
}

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline; }

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline;
}

/public/stylesheets/foo.sass
->
/public/stylesheets/compiled/foo.css

require 'compass'
Compass::Frameworks.register(
  "eleven40", 
  :path => "#{File.dirname(__FILE__)}/.."
)

gem 'compass'
gem 'eleven40'

@import "eleven40";

.container {
  @include eleven40-container;
}
// [...]
.sidebar {
  @include eleven40-fourcol;
}

.container {
  padding-left: 20px;
  padding-right: 20px;
}

.sidebar {
  width: 30.8%;
  margin-right: 3.8%;
  float: left;
}

/app/stylesheets/foo.scss
->
/public/stylesheets/foo.css

/app/assets/stylesheets/

/app/assets/stylesheets/
/app/assets/javascripts/
/app/assets/images/

/*    
*= require_self
*= require 'foo'
*= require_tree . 
*/

$ rake assets:precompile

/app/assets/stylesheets/application.css
->
/public/assets/application-10227...ad1.css

app/assets/*
lib/assets/* # TODO: Test
vendor/assets/*

$box-background: #ccc;
$box-color: #fff;

gem "sencha-touch"

app/assets/images/icons/
  save.png
  print.png
  email.png

@import "icons/*.png";
@include all-icons-sprites;

<div class="icons-save"></div>

$ compass watch