Skip to content

Mixins! Mixins! Everywhere!

Compare
Choose a tag to compare
@una una released this 11 Mar 05:39
· 56 commits to master since this release

You can now use Sass mixins to @include filters!!

Shoutout to @bunomonteiro on #156

Mixins allow for multiple filter arguments to be passed into your classes. This is useful for if you want to add filters in addition to the ones provided (i.e. add a blur).

To use:

  1. Download the /scss folder contents
  2. Include a link to scss/cssgram.scss via an import statement in your Sass manifest file (i.e. main.scss). It may look like: @import 'vendor/cssgram';
  3. Include the mixin @include aden() in your element.

For example:

<figure class="viz--beautiful">
  <img src="../img.png">
</figure>
// Sass
.viz--beautiful {
  @include aden()
}

As mentioned above, you can also add additional filters as arguments when using the library with mixins:

// Sass
.viz--beautiful {
  @include @include aden(blur(2px) /*...*/);
}

Available Mixins:

  • 1977: @include _1977();
  • Aden: @include aden();
  • Brooklyn: @include brooklyn();
  • Clarendon: @include clarendon();
  • Earlybird: @include earlybird();
  • Gingham: @include gingham();
  • Hudson: @include hudson();
  • Inkwell: @include inkwell();
  • Lark: @include lark();
  • Lo-Fi: @include lofi();
  • Mayfair: @include mayfair();
  • Moon: @include moon();
  • Nashville: @include nashville();
  • Perpetua: @include perpetua();
  • Reyes: @include reyes();
  • Rise: @include rise();
  • Slumber: @include slumber();
  • Toaster: @include toaster();
  • Walden: @include walden();
  • Willow: @include willow();
  • X-pro II: @include xpro2();