mirisuzanne

// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// ----


@mixin test() {
  @content;
}

mirisuzanne

// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// Susy (v2.1.2)
// ----

@import "susy";

@mixin mq-layout(
  $mq,

mirisuzanne

// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// Susy (v2.1.2)
// ----

@import "susy";


// Set a column-width, so we can calculate a layout for you

mirisuzanne

// ----
// Sass (v3.3.14)
// Compass (v1.0.0.rc.1)
// ----


$map: (
  hello: world,
  goodbye: pittsburgh,
);

mirisuzanne

<div class="ad item">AD</div>
<div class="flex-container">
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
</div>

mirisuzanne

<div class="sticky">
  <div class="item a">A</div>
  <div class="item c">C</div>
</div>
<div class="item b">B</div>

mirisuzanne

<div class="test">
  Test Div!
  <a href="#">link</a>  
</div>

mirisuzanne

// ----
// Sass (v3.4.3)
// Compass (v1.0.1)
// ----

// Notifications
// =============

.notification {
  border-radius: 0.2em;

mirisuzanne

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----

$container: (
  display: flex, // similar to float/isolate or nest?
  
  // shorthand flow: <direction> || <wrap>
  direction: row row-reverse column column-reverse,

mirisuzanne

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----

$container: (
  display: flex, // [similar to float/isolate or nest?]
  
  // shorthand flow: <direction> || <wrap>
  direction: row row-reverse column column-reverse, // default: row