micahgodbolt

///////////////////////////////////
/// Major Features of Sass 3.3
///////////////////////////////////


// @at-root

.widget {
  @at-root .body {
    background: red;

micahgodbolt

// ----
// Sass (v3.3.0.rc.4)
// Compass (v1.0.0.alpha.18)
// ----

$navigation: (
  background: blue,
  color: green,
  line-height: 1.3,
  is-expanded: (

micahgodbolt

// ----
// Sass (v3.3.0.rc.4)
// Compass (v1.0.0.alpha.18)
// ----

$navigation: (
  background: blue,
  color: green,
  line-height: 1.3,
  is-expanded: (

micahgodbolt

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

//// Fibonacci Function
@function fibonacci($n) {
 $fib: 0 1;
 @for $i from 1 through nth($n,1) {
   $new: nth($fib, length($fib)) + nth($fib, length($fib) - 1);

micahgodbolt

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

// Using maps as the map key allows you to 
// pull the proper value based on multiple inputs/choices
// this helps to avoid nested if statements (if i win, and you lose)

$test: (

micahgodbolt

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

@mixin thing($ratio) {
  foo: $ratio;
  bar: nth($ratio, 1);
  baz: nth($ratio, 3);
}

micahgodbolt

<div></div>

micahgodbolt

<div></div>

micahgodbolt

/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */

@import "susy";

@mixin span(
  $span
) {

micahgodbolt

<div class="extends">
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>
  <div><span></span></div>