A17 SCSS Utilities

Description

Mixin to add a design column spanning width to an element. This mixin is used in the auto generated Colspan CSS classes.

SCSS Usage

@include colspan($n, $bump:false)

And so, in SCSS:

_component.scss

.foo {
  @include colspan(2); // span 2 columns at every breakpoint
}

.bar {
  @include colspan(2); // span 2 columns at every breakpoint

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

.baz {
  @include colspan(2, 20px); // span 2 columns + 20px, at every breakpoint
}

Output

app.css

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

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

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

This mixin also inserts a CSS variable to the children of the element with the mixin; this allows for nesting. See Colspan#nesting.

You may want to span 2 columns and a gutter so the right hand edge of your element is against the next design grid column. For this you would use @include colspan(2, var(--inner-gutter));.