Sass Mixins

_0mixins.scss

/*----------------------------------------------------------------------------
  @group Mixins
----------------------------------------------------------------------------*/

// Creates a background image with width and height dynamically.
//
// $_img - The path to the image.
//
// Compatible in IE8+, Firefox 2+, Safari 4+.
@mixin knockout($_img) {
  background:url($_img) no-repeat;
  display:block;
  height:image-height($_img);
  overflow:hidden;
  text-indent:-100%;
  width:image-width($_img);
}

// Hide an element's text
// Ref: http://sachagreif.com/useful-sass-mixins/
//
// Compatibility untested.
@mixin hide-text{
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
}

// Adds a semi-transparent one-pixel lines placed above and below
// an element to give the illusion it's embossed in its parent.
// Ref: http://sachagreif.com/useful-sass-mixins/
//
// Compatibility untested.
@mixin box-emboss($opacity, $opacity2) {
  box-shadow:white($opacity) 0 1px 0, inset black($opacity2) 0 1px 0;
}

@mixin letterpress($opacity) {
  text-shadow:white($opacity) 0 1px 0;
}

@mixin navigation-list {
  list-style-type:none;
  padding:0;
  margin:0;
  overflow:hidden;
  > li {
    display:block;
    float:left;
    &:last-child {
      margin-right:0px;
    }
  }
}

@mixin no-select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@mixin opacity($opacity) {
  opacity: $opacity;
}


// Allows sprites to be positioned in pseudo elements.
//
// Feed this mixin the name of the image and it will spit out a pseudo element along with a cropped background image apply.
//
// Compatibility untested.
@mixin pseudo-position($sprite-name) {
  // This will add padding that equals the particular sprite's width to the left of the sibling element in order to make room for the sprite.
  padding-left: sprites-sprite-width($sprite-name) + $indent-amount;
    &:before {
       position: absolute;
       left: 0px;
       top: 0px;
       // The following Compass mixin pulls in the sprite background then crops the element respectively.  
       @include sprites-sprite($sprite-name);

       // Compass' sprite helper functions.
       height: sprites-sprite-height($sprite-name);
       width: sprites-sprite-width($sprite-name);
       overflow:hidden;
    }
  }
}

// Allow for easy to use coloring of links.
// All arguments are optional.
// Dependency required for @include transition is
// @import "compass/css3/transition".
//
// Example:
// a { @include links(red, blue, green, yellow, purple, 1s all linear);}
//
// $link - Link hex color.
// $visited - Visted hex color.
// $hover - Hover hex color.
// $active - Lighten the hover by 10%.
// $focus - Uses $hover with $transition.
// $transition - Transition of color and ease-in-out.
//
// Compatible in IE8+, Firefox 2+, Safari 4+.
@mixin links($link: '#7ab4e5', $visited: '#7ab4e5', $hover: '#e62c25', $active: 'lighten($hover, 10%)', $focus: $hover, $transition: '.15s color ease-in-out') {
  &:link    { color: $link;    }
  &:visited { color: $visited; }
  &:hover   { color: $hover;   }
  &:active  { color: $active;  }
  &:focus   { color: $focus;   }
  @include transition($transition);
}

/* @end */

_breakpoint.scss

/*----------------------------------------------------------------------------
  @group Great Breakpoint
----------------------------------------------------------------------------*/

// Allows for generic pre-made and custom breakpoints.
//
// This set of break points includes ability to use device oriented styles,
// "ninja method" (min-width with pixel) and between breakpoints.
// Ref: http://ahrengot.com/web-development/sass-breakpoint-mixin/
//
// Example:
// @include breakpoint(tablet) {
//  width: 80%;
// }
// @include breakpoint(min-width, 1192px) {
//   background: red;
// }
// @include between-breakpoints(0, 1024px) {
//   font-size: 1.3em;
// }
//
// $point - The name of the device or your min/max-width.
// $value - The pixel value ending with px.
//
// Compatibility untested.
@mixin breakpoint($point, $value: 0) {
  @if $point == mobile {
    @media (min-width: 320px) { @content; }
  }
  @else if $point == mobile-horizontal {
		@media (min-width: 480px) { @content; }
	}
	@else if $point == tablet {
		@media (min-width: 768px) { @content; }
	}
	@else if $point == tablet-horizontal {
		@media (min-width: 1024px) { @content; }
	}
	@else if $point == desktop {
		@media (min-width: 1280px) { @content; }
	}
	@else if $point == desktop-wide {
		@media (min-width: 1500px) { @content; }
	}
	@else {
		@media ($point: $value) { @content; }
	}
}

// Between-breakpoints
@mixin between-breakpoints($min, $max) {
	@media (min-width: $min) and (max-width: $max) {
		@content;
	}
}

/* @end */

_fancy_tiles.scss

/*----------------------------------------------------------------------------
  @group Fancy Tiles
----------------------------------------------------------------------------*/

// Fancy Tiles
//
// Taken from the GumbyFramework.  Needs additional work to be production ready.
//
// This will create a product grid that is 
// 4 columns on desktop, 2 on tablets, and
// 1 column on mobile devices.
//
// #my-product-grid-container li.product {
//  @include fancytiles(4,2,1);
//  min-height: 300px;
//  height: auto;
// }
//
// 4 columns on desktop, 2 at 600px and,
// 1 column on mobile devices
// #my-different-grid-container li.product {
//  @include fancytiles(4,2,1, $min-device-width, '600px', $row-max-width);
//  min-height: 300px;
//  height: auto;
// }
//
// Compatibility untested.
@function divide-cols($colnum) {
  @return 100%/$colnum;
}

@mixin fancytiles($desktop-columns, $tablet-columns: $desktop-columns, $mobile-columns: 1, $small-break: 0px, $medium-break: $tablet-device-width, $large-break: $row-max-width) {
  // These styles apply to all shift-columns
  display: inline-block;
  float: left;
  padding-left: $gutter / 2;
  padding-right: $gutter / 2;

  // IE8 fallback
  width: divide-cols($mobile-columns);

  @include respond("min-width: #{$small-break}") {
    width: divide-cols($mobile-columns);
  }
  @include respond("min-width: #{$medium-break}") {
    width: divide-cols($tablet-columns);
  }
  @include respond("min-width: #{$large-break}") {
    width: divide-cols($desktop-columns);
  }
}

/* @end */

_visibility.scss

/*----------------------------------------------------------------------------
  @group Visibility
----------------------------------------------------------------------------*/

/**
 * Visibility
 *
 * examples:
 * .show-on-all-phones{
 *   @include visible(all-phones);
 * }
 * .hide-on-tablets{
 *   @include hidden(tablets);
 * }
 */
@mixin hidden($media) {
  @include respond($media) {
    display: none !important;
  }
}
@mixin visible($media) {
  @include respond($media) {
    display: inherit !important;
  }
}

/* @end */