micahgodbolt

module.exports = function(grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
   compass: {                  // Task
     dist: {                   // Target
       options: {              // Target options
         environment: 'production',
         config: 'config.rb'
       }

micahgodbolt

div {
  original: 12 10 13 9;
  sorted: 9 10 12 13;
}

micahgodbolt

$foo: 1;
$bar: 6;

@while $foo < $bar {
    h#{$foo} { // do something
        font-size: ($bar - $foo)+em;
    }
    $foo: $foo + 1; // advance a counter
}

micahgodbolt

<div class="box">
    <div class="arrow"></div>
</div>

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);
}