brianmcallister

/** ----------------------------------

  ${1:Title}
  ${1/(.)|(?m:\n.*)/(?1:-)/g}

  $2

---------------------------------- */
$3

brianmcallister

/*jslint browser: true, indent: 2, maxlen: 80, nomen: true, plusplus: true */

brianmcallister

module Sass::Script::Functions
  # Wrapper around Ruby's Array#include? method.
  # https://gist.github.com/4088394
  #
  # value - Value to check for in the list.
  # list  - List to look through.
  #
  # Examples
  #   
  #   $list: a b c;

brianmcallister

/*
  Debugging.
*/
@mixin o($color: red) {
  @include if-debug {
    outline: 1px solid $color;
  }
}

@mixin b($color: blue) {

brianmcallister

/*
  I like to set up some extendable classes to keep the bulk of my sprite setup outside of my generated CSS.
*/
/*
  Button sprite extendable.
*/
%button-sprite {
  background-image: $button-sprite;
  
  @include retina {

brianmcallister

/*
  Set a background image at 1x and 2x.
  https://gist.github.com/3895807
  @param {String} $name Image name.
  @param {String} $ext File extension, e.g.: '.png'.
*/
@mixin retina-bg($name, $ext) {
  @include squish-text;
  
  $image: '#{$name}#{$ext}';

brianmcallister

// Size mixin.
// https://gist.github.com/brianmcallister/3659524
// 
// $width  - Element width, with units.
// $height - Optional height of the element. Expects units, ex: 5px.
//           Defaults to null.
@mixin size($width, $height: null) {
  width: $width;
  
  @if $height {

brianmcallister

// Print position coords only.
// https://gist.github.com/brianmcallister/3641867
// 
// $values - Position values. Null values get skipped over.
@mixin pos-coords($values: null null null null) {
  $position-list: top right bottom left;
  $count: 1;
  
  @if length($values) == 1 and $values == 'reset' {
    $values: auto auto auto auto;

brianmcallister

/*
This pretty much doesn't work at all right now.
*/
@mixin retina-general-sprite($name, $set-dimensions: true) {
  $sprite-width: image-width('general.png');
  $sprite-height: image-height('general.png');
  
  $sprite-file-url: sprite-file($general-sprite, $name);
  $sprite-file-width: image-width($sprite-file-url) / 2;
  $sprite-file-height: image-height($sprite-file-url) / 2;

brianmcallister

/*
  Set a background image sized for retina screens, with an option to use the image url or an inline image.
  @param {String} $image Image to use.
  @param {String} [$type] Type of image url to use. Default to an inline image.
*/
@mixin retina-image($image, $type: 'inline') {
  @include hide-text;

  @if $type != 'inline' and $type != 'url' {
    @warn 'Unknown usage type. Falling back to "url"';