gorillawit

class SomeAjaxCallback
  constructor: (@value) ->
    throw "Bad value" unless value?
    setTimeout @process, 5000
  # setTimeout doesn't give us a "new context"
  # so we'd get our "global context" : window
  # let's avoid that use the fat arrow
  process: =>
    throw "Wrong context" unless @value?
 

gorillawit

guard 'coffeescript', :input => 'coffee', :output => '../source/views', :source_map => true, :source_root => '../../kaybus-control/coffee'
# source_map should be relative to the destination of the js file

# not quite working without config file
guard 'compass', :input => 'sass', :output => '../source/css' do
  watch('(.*)\.scss')
end

guard 'haml' do
  watch('index.haml')

gorillawit

!!!
%html
  %head
    %meta{:charset => "utf-8"}
    %title Title
    %meta{:content => 'width=device-width, initial-scale=1', :name => 'viewport'}
    %link{:href => "css/style.css", :rel => "stylesheet"}
    /[if IE]
      %script{:src => 'http://html5shim.googlecode.com/svn/trunk/html5.js'}>
  %body

gorillawit

guard 'coffeescript', :input => '.', :output => 'js/'

guard 'haml', :output => "."  do
  watch('index.haml')
end

guard 'livereload' do
  watch(%r{(js|html|css)$})
end

gorillawit

// ============================================================
//          Positioning Mixins                                  
// ------------------------------------------------------------

//**
// Private Mixin: _set-position 
// Set the Position for the Position Mixins
//
// @mixin       _set-position
// @param       $position {list} One Value = top, Two Value = top left, Four Values = top right bottom left (t = zero position) can be in px or %

gorillawit

.my-other-class {
  background: url(http://www.placekitten.com/200/200) no-repeat;
}

.my-class {
  background: no-kittens;
}

.my-class {
  color: green;

gorillawit

.class1, .class2, .class3 {
  font-size: 2em;
}

.class3 {
  color: green;
}

gorillawit

menu {
  background: #333333;
}
menu .menu-item {
  float: left;
}
menu .menu-item .menu-link {
  color: blue;
  border-right: 1px solid black;
}

gorillawit

/* 
@at-root directory is a global sass function that allows @root can be called from
every nested media. @at-root refers to the base level so @at-root = the root that 
all media-queries are bound too. ie for every nested media query, this is the 
global style for them. NOW! we get to specify them in the latest Sass release, 
@at-root: allows us to jump out of our context this is great if you have one 
asset that needs to be different that than the others
*/
@media (min-width: 300px) {
  .my-widget .inside-mq {

gorillawit

.ifStatement {
  background: green;
}

div {
  background: red;
}
div + div {
  background: green;
}