codingdesigner

require "rubygems"
require "chunky_png"
require "base64"

module Sass::Script::Functions
  
  def background_noise(c, noise = 0.5, opacity = 0.08, size = 200, mono = false)
    
    # Convert SASS numbers to Ruby classes
    noise   = noise.to_s.to_f   if noise.is_a? Sass::Script::Number

codingdesigner

aside.samples
  position: absolute
  z-index: 3
  top: -90px
  right: 200px
  +transform2d(scale(0.9))
  +transition(all,0.5s)
  $badge-total: 8
  @for $i from 1 through ($badge-total + 1)
    $radius: 70.875

codingdesigner

// generate fibonacci numbers
// fib(50) #=> 1 1 2 3 5 8 13 21 34
@function fib($n)
  $fibonacci: ()
  $i: 0
  $j: 1
  @while ($i + $j) < $n
    $fibonacci: append($fibonacci, $i + $j)
    $k: $j
    $j: $i

codingdesigner

// convert px to em in sass. 
// $target-px:  the value you want to convert
// $context: the current pixel value of 1em

@function calc-em($target-px, $context) {
  @return ($target-px / $context) * 1em;
}

codingdesigner

/**
 * Sassy Text Shadows Test
 * fancy shadows generated by Sass
 * see https://github.com/canarymason/sassytextshadow for more information
 * https://rubygems.org/gems/sassy-text-shadow to install
 */

body {
  text-align: center;
  font-family: helvetica, georgia;

codingdesigner

html{
  height: 100%;
}

body {
  background-color: white;
  background-image: -webkit-repeating-linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 25px, rgba(0, 0, 0, 0.5) 25px, rgba(0, 0, 0, 0.5) 50px);
  background-image: -moz-repeating-linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 25px, rgba(0, 0, 0, 0.5) 25px, rgba(0, 0, 0, 0.5) 50px);
  background-image: -o-repeating-linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 25px, rgba(0, 0, 0, 0.5) 25px, rgba(0, 0, 0, 0.5) 50px);
  background-image: -ms-repeating-linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 25px, rgba(0, 0, 0, 0.5) 25px, rgba(0, 0, 0, 0.5) 50px);

codingdesigner

Based on Survival Kit

I gave a demo last night at the first NYC Sass meetup that went over some of the key features of Sass and Compass. If you're going thru this bear in mind that the HTML is definitely overkill for this purpose, and that I'm not including any of the images in this gist. But you should get the idea.

@canarymason

codingdesigner

////////////////////////////
// SURVIVAL KIT - BREAKPOINT
// breakpoint($breakpoint, $media: 'screen')
////////////////////////////

$breakpoint-default-feature: min-width !default

// create $breakpoint variables like so
// assume $breakpoint-default-feature if only a number
$breakpoint1: 500px

codingdesigner

div {
 height: 300px;
 width: 300px;
 float: left;
 margin-right: 1em;
}
.one {
  background-image: linear-gradient(-85deg,
	#bada55 25%, #444 25%);
}

codingdesigner

section {
  width: 696px;
}

.view-store table {border-bottom: 1px solid rgb(211, 212, 210);margin-bottom: 24px;padding-bottom: 23px;clear: left;display: block;
}

table {width: 100%;
}