A17 SCSS Utilities

Description

Function that returns a design column spanning CSS calc().

This function is used in the Colspan (mixin) and subsequently in the auto generated Colspan CSS classes.

Both Colspan (mixin) and Colspan are concerned with CSS width. This function is useful when you want a design column spanning margin, padding, top/right/bottom/left, inset or other positioning type CSS declaration.

SCSS Usage

colspan($n, $bump:false)

And so, in SCSS:

_component.scss

.foo {
  padding-left: colspan(2); // span 2 columns at every breakpoint
}

.bar {
  padding-left: colspan(2); // span 2 columns at every breakpoint

  @include breakpoint('md+') {
    padding-left: colspan(4); // from 'md' and up, span 4 columns
  }
}

.baz {
  padding-left: colspan(2, 20px); // span 2 columns + 20px, at every breakpoint
}

Output

app.css

.foo {
  padding-left: calc(((2 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (2 / var(--grid-columns) * var(--inner-gutter))));
}

.bar {
  padding-left: calc(((2 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (2 / var(--grid-columns) * var(--inner-gutter))));
}

@media screen and (min-width: 650px) {
  .bar {
    padding-left: calc(((4 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (4 / var(--grid-columns) * var(--inner-gutter))));
  }
}

.baz {
  padding-left: calc((((2 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (2 / var(--grid-columns) * var(--inner-gutter)))) + 20px);
}