Snugug

Avalon:sass Avalon$ compass install sassy-buttons
No such framework: "sassy-buttons"

Snugug

Avalon:sass Avalon$ compass install -r sass-buttons sassy-buttons --trace
LoadError on line 31 of /System/Library/Frameworks/Ruby.framework/Versions/1.8/usr/lib/ruby/1.8/rubygems/custom_require.rb: no such file to load -- sass-buttons
Run with --trace to see the full backtrace
Avalon:sass Avalon$ 

Snugug

/**
 * SVG Filter Shadows on CSS Images
 * See http://dabblet.com/gist/1562718 for my inspiration.
 *  Original by Lea Verou. Just wanted to see the triangles blown out
 *  Top triangle uses the SVG Shadow (notice how it's actually a triangle)
 *  Bottom is current CSS box shadow (notice how it sucks?)
 *
 *  Need Webkit Nightly or Canary Chrome to see.
 */

Snugug

  @for $i from 1 through $shadows-count {

    $shadow: nth($shadows, $i);
    $color: nth($shadow, 1);
    $count: nth($shadow, 2);

    @for $i from  $currentwidth to ($currentwidth + $count) {
      $x: $x + $x-delta;
      $y: $y + $y-delta;

Snugug

body {
  background-image: @include linear-gradient(color-stops(white, black), top);
}

Snugug

// Surprisingly easy, just need to wrap the property in the Interpolation braces.

@mixin border-std($position: 'border', $color: #000) {
  #{$position}: 1px solid $color;
}

Snugug

Sass

%half { width: 50%; }
%full { width: 100%; }

#foo {
  @extend %full;

  @media screen (min-width: 600px) {
 @extend %half;

Snugug

//////////////////////////////
// Generalized Media Query Mixin
//
// Requires Sass 3.2+
// Until released:
// (sudo) gem install sass --pre
//////////////////////////////
@mixin media-query($value, $operator: 'min-width', $query: 'screen') {
  @media #{$query} and (#{$operator}: #{$value}) {
    @content;

Snugug

What if controlling your media queries was as easy as adding on to a Sass list? What if I told you it now is?

This snippet comes from a modified version of mixins in the Aura Responsive Framework and came from me hijacking the respond-to mixin namespace but still wanting to use it for custom media queries. It's a little ugly and requires Sass 3.2+ (for now, (sudo) gem install sass --pre), but it works a charm.

There are two fairly mundane caveats to this method. First, every media query needs to be named. Second, every media query needs a size and assumes min-width and screen. If you want to change min-width, simply add your operator as another option, but if you want to change screen, you need to also include your operator even if you want it to be min-width.

Also, I haven't built in warnings yet for when you do bad things, so bear that in mind.

Without further adue, tada.

Snugug

////////////////////////
// SCSS
////////////////////////
// Define color variables
$red: #e10000;
$orange: #e18700;
$yellow: #e1e100;
$green: #00b400;
$blue: #1e00b4;
$purple: #7800b4;