Skip to content

Instantly share code, notes, and snippets.

@wesruv wesruv/_grid-width.scss
Last active Jun 17, 2019

Embed
What would you like to do?
// Defined globally in my project
$gutter: 18px;
/// Returns a CSS value to imitate a grid item when column widths are fluid with gutters are static
/// Is written to optimize CSS output, so Scss has to be a bit verbose
/// @require $gutter
///
/// @param {number} $column-span How many columns wide element should be
/// @param {number} $total-columns How many total columns are available
/// @param {number} $total What is the total width, will typically be 100%, but could be grid's max-width
/// @param {number} $extra Extra length to be added
///
/// @return {length} calc() value of width
@function grid-width($column-span, $total-columns: 14, $total: 100%, $extra: 0) {
// First line calculates the width of a column
// Second line multiplies that by the span and adds the necessary gutter widths
// sass-lint:disable indentation
$total-gutter-length: ($total-columns - 1) * $gutter;
$gutters-to-span-length: ($column-span - 1) * $gutter;
@if is-number($total) and unit($total) == '%' {
// If $total is a % we need to pass back a calc() value
@if $extra != 0 {
@if $gutters-to-span-length != 0 {
@return calc(
(#{$total} - #{$total-gutter-length}) / #{$total-columns}
* #{$column-span} + #{$gutters-to-span-length}
+ #{$extra}
);
}
@else {
@return calc(
(#{$total} - #{$total-gutter-length}) / #{$total-columns} + #{$extra}
);
}
}
@else {
@if $gutters-to-span-length != 0 {
@return calc(
(#{$total} - #{$total-gutter-length}) / #{$total-columns}
* #{$column-span} + #{$gutters-to-span-length}
);
}
@else {
@return calc(
(#{$total} - #{$total-gutter-length}) / #{$total-columns}
);
}
}
}
@else {
@if $extra == null {
$extra: 0;
}
// If $total is a length we can pass back a length
@return
($total - $total-gutter-length) / $total-columns
* $column-span + $gutters-to-span-length + $extra;
}
// sass-lint:enable indentation
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.