// Black transparent background @function black($opacity){ @return rgba(0, 0, 0, $opacity); } // White transparent background @function white($opacity){ @return rgba(255, 255, 255, $opacity); } // Take a list of classes and generate a selector list @function join-classes($classes, $inherit: true) { $selectors: (); @each $class in $classes { @if str-index($class, ".") != 0 { $class: "." + $class; } @if $inherit { $selectors: append($selectors, unquote("&" + $class), "comma"); } @else { $selectors: append($selectors, unquote($class), "comma"); } } @return $selectors; } // Remove the first selector character (#, ., etc) from the class name or ID @function remove-selector($selector) { @return str-slice($selector, 2, str-length($selector)); } // Generate a class name and apply an optional prefix @function class-name($class, $prefix: $namespace, $selector: ".") { $name: $class; @if str_slice($class, 1, 1) == $selector { $name: remove-selector($name); } @if $prefix != "" { $name: $prefix + $name; } @return $selector + $name; } // Format a class name into the BEM format @function bem($block: "", $element: "", $modifier: "", $element-separator: $bem-element-separator, $modifier-separator: $bem-modifier-separator) { $name: $block; @if $element != "" { $name: $name + $element-separator + $element; } @if $modifier != "" { $name: $name + $modifier-separator + $modifier; } @return $name; } // Calculate the gutter spacing as a percentage. // Use the max width of the grid to calculate against. @function gutter($width, $gutter) { @return if($gutter, ((to-pixel($gutter) / to-pixel($width)) * 100 * 1%), 0%); } // Calculate the width of an individual element within a row. // Take into account max widths and gutters. @function span-width($n, $columns, $width, $gutter) { $row-width: 100%; $gutter-width: 0%; // If a gutter is set, remove width based on the sum of the gutter columns @if $gutter { $gutter-width: gutter($width, $gutter); $row-width: $row-width - ($gutter-width * ($columns - 1)); } // The column width should span a division of the total width $span-width: ($row-width / $columns) * $n; // If a gutter is set, increase the column width to fill in the missing gaps @if $gutter and $n > 1 { $span-width: $span-width + (($n - 1) * $gutter-width); } @return $span-width; }