// --------------------------------------------------------------------------- // 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 | ] // $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); } }