| 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 |
| 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 |
| // 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 |
| // 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; | |
| } |
| /** | |
| * 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; |
| 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); |
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
| //////////////////////////// | |
| // 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 |
| div { | |
| height: 300px; | |
| width: 300px; | |
| float: left; | |
| margin-right: 1em; | |
| } | |
| .one { | |
| background-image: linear-gradient(-85deg, | |
| #bada55 25%, #444 25%); | |
| } |
| 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%; | |
| } |