django-compass-mixins/lib/susy/language/susyone/_functions.scss

// ---------------------------------------------------------------------------
// Imports

// We need access to some basic font settings for handling media-queries.
@import "compass/typography/vertical_rhythm";

// For now, we also need this...
$browser-default-font-size-px       : 16px;
$browser-default-font-size-percent  : 100%;
$browser-default-font-size-pt       : 12pt;

$rem-with-px-fallback               : true !default;

// ---------------------------------------------------------------------------
// Sass list Functions

// Return a list with specific items removed
//
// filter($list, $target)
// - $list    : The list to filter.
// - $target  : An item to be removed from the list.
@function filter($list, $target) {
  $clean: compact();
  @if index($list, $target) {
    @each $item in $list {
      $clean: if($item == $target, $clean, append($clean, $item));
    }
  } @else { $clean: $list; }
  @return $clean;
}

// ---------------------------------------------------------------------------
// Don't use static output when it will break things

// Switch element-level output to fluid, when container-width is wrong for static
//
// fix-static-misalignment([$style, $width])
// - $style: $container-style.
// - $width: $container-width.
@function fix-static-misalignment(
  $style: $container-style,
  $width: $container-width
) {
  @if $container-width and $container-width != container-outer-width($width: false) {
    $style: fluid;
  }
  @return $style;
}

// ---------------------------------------------------------------------------
// Grid Functions

// Returns the full width of a grid based on your grid settings.
//
//  $columns  : The number of columns to get width for.
@function columns-width(
  $columns  : $total-columns
) {
  @if round($columns) != $columns {
    @warn "Susy works best with integer column-spans." +
    "For partial-columns, you may need to finesse the math by hand using functions directly.";
  }
  @return ($columns * $column-width) + (if($columns >= 1, ceil($columns - 1), 0) * $gutter-width);
}

// Return the grid width after adding or subtracting grid padding
//
// $width     : the width of the grid without padding;
// $operation : ( add | subtract ) if padding should be added or subtracted;
@function handle-grid-padding(
  $width,
  $operation : subtract
) {
  $pad: $grid-padding*2;

  @if comparable($width, $grid-padding) {
    $width: if($operation == subtract, $width - $pad, $width + $pad);
  } @else {
    @warn "$grid-padding must be set in units comparable to the container width.";
  }

  @return $width;
}

// Return the full outer width of a Container element.
//
//  $columns  : The number of columns in the Grid Layout.
@function container-outer-width(
  $columns  : $total-columns,
  $width    : $container-width
) {
  $outerwidth: if($width, $width, columns-width($columns));

  @if $width {
    @if not($border-box-sizing) { $outerwidth: handle-grid-padding($outerwidth, subtract); }
  } @else {
    @if $border-box-sizing { $outerwidth: handle-grid-padding($outerwidth, add); }
  }

  @return $outerwidth;
}

// Return the percentage width of a single column in a given 'context'.
//
//  $context  : The grid context in columns, if nested.
//  $style    : The container style to use.
@function column(
  $context  : $total-columns,
  $style    : fix-static-misalignment()
) {
  @return if($style == static, $column-width, relative-width($column-width, $context));
}

// Return the percentage width of multiple 'columns' in a given 'context'.
//
//  $columns  : The number of columns to get relative width for.
//  $context  : The grid context in columns, if nested.
//  $style    : The container style to use.
@function columns(
  $columns,
  $context  : $total-columns,
  $style    : fix-static-misalignment()
) {
  @return if($style == static, columns-width($columns), relative-width(columns-width($columns), $context));
}

// Return the percentage width of a single gutter in a given 'context'.
//
//  $context  : The grid context in columns, if nested.
//  $style    : The container style to use.
@function gutter(
  $context  : $total-columns,
  $style    : fix-static-misalignment()
) {
  @return if($style == static, $gutter-width, relative-width($gutter-width, $context));
}

// Return the percentage width of a given value in a given 'context'.
//
//  $width    : Any given width value.
//  $context  : The grid context in columns, if nested.
@function relative-width(
  $width,
  $context : $total-columns
) {
  @return percentage($width / columns-width($context));
}

// Return the total space occupied by multiple columns and associated gutters.
// Useful for adding padding or margins (prefix, suffix, push, pull, etc.)
//
//  $columns  : The number of columns to get relative space for.
//  $context  : The grid context in columns, if nested.
//  $style    : The container style to use.
@function space(
  $columns,
  $context  : $total-columns,
  $style    : fix-static-misalignment()
) {
  @return columns($columns, $context, $style) + if($columns >= 1, gutter($context, $style), 0);
}

// Accept a list including column-count and (optional) position.
// Return either the column count or the position alone.
//
//  $columns  : the list to split and interprate.
//  $request  : The value to return, either 'columns' or 'position'.
@function split-columns-value(
  $columns,
  $request : columns
) {
  $pos  : false;
  $cols : false;

  @each $var in $columns {
    @if (type-of($var) == 'string') {
      $pos: $var;
    } @else {
      @if (type-of($var) == 'number') and (unitless($var)) {
        $cols: $var;
      } @else {
        @warn '"#{$var}" is not a valid part of "$columns: #{$columns}" in the columns() mixin.';
      }
    }
  }

  @if $request == 'columns' {
    @return $cols;
  } @else {
    @if $request == 'position' {
      @return $pos;
    } @else {
      @warn '"#{$request}" is not a valid value for $request';
    }
  }
}

// Accept nth-selector variables, and format them as a valid CSS3 selector.
//
// $n         : [first | only | last | <equation>]
// $selector  : [child | last-child | of-type | last-of-type ]
@function format-nth(
  $n        : last,
  $selector : child
) {
  @if ($n == 'last') or ($n =='first') or ($n =='only') {
    $selector: '#{$n}-#{$selector}';
  } @else {
    $selector: 'nth-#{$selector}(#{$n})';
  }
  @return $selector;
}

// ---------------------------------------------------------------------------
// Media Functions

// Return an em value adjusted to match the browser default font size.
// Note: This only works if actual sizes are set relative to browser defaults.
//
// $ems         : The initial value to be converted.
// $font-size   : The current font-size in.
@function base-ems(
  $ems,
  $font-size: $base-font-size
){
  $font-size  : if(unit($ems) == 'rem', $base-font-size, $font-size);
  $unit       : unit($font-size);
  $mult       : $ems / ($ems * 0 + 1);

  @if $unit == 'px' {
    @return $font-size / $browser-default-font-size-px * $mult * 1em;
  }
  @else if $unit == '%' {
    @return $font-size / $browser-default-font-size-percent * $mult * 1em;
  }
  @else if $unit == 'em' {
    @return $font-size / 1em * $mult * 1em;
  }
  @else if $unit == 'pt' {
    @return $font-size / $browser-default-font-size-pt * $mult * 1em;
  }
  @else {
    @warn 'Variable $base-font-size does not have a valid font unit. Valid units for fonts in CSS are px, pt, em, and %.';
  }
}

// This name will be deprecated...
@function absolute-ems(
  $ems,
  $font-size: $base-font-size
){
  @return base-ems( $ems, $font-size);
  }

// Return a length, after any em-values have been sent through absolute-ems().
//
// $length      : The length value to be checked and adjusted if necessary.
// $font-size   : The current font-size in px.
@function fix-ems(
  $length,
  $font-size: $base-font-size
){
  @if $length {
    @if (unit($length) == 'em') or (unit($length) == 'rem') {
      $length: absolute-ems($length,$font-size);
    }
  }
  @return $length;
}

// Sort a list of arguments into "$min $layout $max $ie" order, and return the list.
//
// $media-layout  : a list of values [$min $layout $max $ie] including...
//                : - one unitless number (columns in a layout)
//                : - two optional lengths (min and max-width media-query breakpoints).
//                : - one optional boolean or string to trigger fallback support for IE.
// $font-size     : [optional] The base font-size of your layout, if you are using ems.
//                : - defaults to $base-font-size
@function medialayout(
  $media-layout,
  $font-size: $base-font-size
) {
  $media        : false;
  $min          : false;
  $layout       : false;
  $max          : false;
  $ie           : false;
  $has-layout   : false;

  @each $val in $media-layout {
    @if (type-of($val) == "number") {
      @if unitless($val) {
        $layout     : $val;
        $has-layout : true;
      } @else {
        @if ($has-layout) and not($media) {
          $max: $val;
        } @else {
          @if $media {
            $media: join($media,$val);
          } @else {
            $media: $val;
          }
        }
      }
    } @else {
      $ie: $val;
    }
  }
  @if (length($media) > 0) {
    @if (length($media) == 1) {
      $min: nth($media,1);
    } @else {
      $min: nth($media,1);
      $max: nth($media,2);
      @if comparable($min, $max) {
        @if ($min > $max) {
          $max: nth($media,1);
          $min: nth($media,2);
        }
      } @else {
        @warn "Can't compare incompatible units." +
         "Using #{$min} for min-width, and #{$max} for max-width";
      }
      @if (length($media) > 2) {
        @warn "You can only send two lengths: a min-width and an (optional) max-width." +
         "You sent #{length($media)}: #{$media}";
      }
    }
  }

  // media-queries must be set in ems relative to the browser default
  // rather than the font-size set in CSS.
  $min: fix-ems($min,$font-size);
  $max: fix-ems($max,$font-size);

  @return $min $layout $max $ie;
}

// Return the nearest layout (column-count) above a given breakpoint.
//
// $min : The min-width media-query breakpoint above which to establish a new layout.
@function get-layout(
  $min
) {
  $min      : fix-ems($min);
  $return   : false;

  @if comparable($min, $column-width) {
    $return : ceil(($min + $gutter-width) / ($column-width + $gutter-width));
  } @else {
    @warn "Can't determine a layout, becuse #{$min} and #{$column-width} are not comparable.";
  }

  @return $return;
}

// Check to see if a given $media-layout list is simply the default.
//
// $media-layout  : a list of values including -
//                : One unitless number (columns in a layout)
//                : Two optional lengths (min and max-width media-query breakpoints).
//                : One optional boolean or string to trigger fallback support for IE.
@function is-default-layout(
  $media-layout
) {
  $media-layout : medialayout($media-layout);
  $min          : nth($media-layout,1);
  $layout-cols  : nth($media-layout,2);
  $max          : nth($media-layout,3);

  @if $min or $max {
    @return false;
  } @else {
    @return if($layout-cols == $total-columns,true,false);
  }
}