bensmithett

/**
 * @jsx React.DOM
 */

"use strict";

var React = require("react/addons");
var ReactStyle = require("react-style");

var MyComponent = React.createClass({

bensmithett

// ----
// Sass (v3.2.19)
// Compass (v0.12.6)
// ----

.text-label-beta
  //-------------------------------
  // Size
  //-------------------------------
  &.-size-small

bensmithett

• automate accessibility & readability with Bas
• hack around with currentColor & em sizing for childless components
• help out on Sass & Compass issues
• build something with Hoodie
• Do some client side only timezone stuff
• Infinite scroll! http://nmjenkins.com/presentations/infinite-win.html
• Macros (do something around logging?) http://ryanseddon.github.io/sweetjs-talk/
• Bootcamp https://github.com/thejameskyle/bootcamp

bensmithett

var views = {
  foo: function($el, el, props) {
    console.log(props);
  },
  bar: function($el, el, props) {
    console.log(props);
  }
};
viewloader.execute(views);

bensmithett

<div class="parent-class dropdown-toggle">Hi</div>
<div class="dropdown-toggle parent-class">Hi</div>

bensmithett

// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----

.parent-class {
  &.dropdown-toggle {
    color: red;
  } 
}

bensmithett

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

$unquoted-string: unquote("foo")
$quoted-string: quote(foo)

body
  background: $unquoted-string == $quoted-string

bensmithett

<div class="gallery">
  <div class="gallery__item">
    <div class="photo"></div>
  </div>
  <div class="gallery__item">
    <div class="video"></div>
  </div>
  <div class="gallery__item">
    <div class="audio"></div>
  </div>

bensmithett

<div class="parent">
  <div class="parent__children">
    <div class="child"></div>
    <div class="child--modified"></div>
  </div>
</div>

bensmithett

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.7)
// ----

$ie7: false
$resp: true

body
  // Output MQs