micahgodbolt

//Proposed Susy syntax to create "The Fonmon" asymmetric grid layout. http://gridsetapp.com/specs/fonmon.php?gridset=show

$total-columns: 5; 

$column-width: 200px, 96px, 96px, 96px, 200px; 
// could use relative units: 1, 1 would be 50/50%. 1, 2 would be 33/66%, 1, 1, 1 would be 33/33/33% 

$columns: column padding, column padding, column padding, column padding, …; //suggested multi dimensional syntax

$gutter-width: 30px;

micahgodbolt

= ir($image)
        display: block 
	background: url(../img/#{$image})
	height: image-height($image)
	width: image-width($image)
	border: 0
	font: 0/0 a
	text-shadow: none
	color: transparent
	background-color: transparent

micahgodbolt

# Require any additional compass plugins here.
require 'zen-grids'
require 'compass-normalize'
require 'sass-globbing'
# Set this to the root of your project when deployed:
relative_assets = "true";
css_dir = "css"
sass_dir = "sass"
extensions_dir  = "sass-extensions"
images_dir = "images"

micahgodbolt

# Block syntax
<%
if !defined? title
  title = "Default Title"
end
%>

<h2><%= title %></h2>
<p>Blah blah blah blah</p>

micahgodbolt

$(document).ready(function() {

// Make tabs work
  
  $('.tabs-wrapper .tab-option').hide();
  $('.tabs-wrapper .tab-option:first').show();
  $('.tabs-wrapper li:first').addClass('active');
  
  $('.tabs-wrapper .tabs li a').click(function(){
    $(this).parent().siblings().removeClass('active');

micahgodbolt

$small = 400px;
$medium = 800px;
$upto-medium = $medium, max-width;

@mixin respond-to($primary, $secondary:min-width) {
  @if $secondary == max-width {
    @media screen and (max-width: $primary - 1) { @content; }
  }
  @else if $secondary == min-width {
    @media screen and (min-width: $primary) { @content; }

micahgodbolt

%icon-font:before {
  font-family: "fontcustom";
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  display: inline-block;
}

.icon-calendar:before { content: "\f100"; }
.icon-comment:before { content: "\f101"; }

micahgodbolt

@mixin respond-to($primary, $secondary:min-width) {
  @if $secondary == max-width {
    @media screen and (max-width: $primary - .001) { @content; }
  }
  @else if $secondary == min-width {
    @media screen and (min-width: $primary) { @content; }
    @if $primary == $large {
      .ie8 &{
        @content;

micahgodbolt

// ---
// Sass (v3.2.9)
// ---


@mixin respond-to($queries...) {
    $length: length($queries);
    @for $i from 1 through $length{
        @if $i % 2 == 1 {
            @media screen and (min-width: nth($queries, $i)) { 

micahgodbolt

$animal: cat;
$tail: curl;

div {
    @if $animal == 'cat' {
        sound: meow;
    }
    @if $animal == 'dog' {
        sound: woof;
    }