Mixins! Mixins! Everywhere!
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:
- Download the /scss folder contents
- 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';
- 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();