A17 SCSS Utilities

The following utilities output large amounts CSS classes for you to use within your HTML:

Colspan
Grid Columns
Spacing
Typography
Color
DevTools

Each of these classes has a either a %placeholder, @mixin and/or @function to also use within your SCSS.

If you would prefer not to generate the CSS classes, you can switch off various features by making a $a17-scss-generate map:

application.scss

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ include setup tokens

@import '_tokens';

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ include A17 SCSS Utilities

$a17-scss-generate: (
  colspan: false,
  grid: false,
  color: false,
  spacing: false,
  typography: false,
  devtools: false,
);
@import '~@area17/scss-utilities/a17-scss-utilities';

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ include site css

@import 'mixins/_your-mixin';

The values for each can be true or false as required, where the default is true.