Mixins

The Ushahidi Platform uses Bourbon, a Sass mixin library. While Bourbon covers most of our mixin needs, there are times when custom mixins are needed. When that is the case each custom mixin is given it's own .scss file in the mixins directory which are then @imported via the _mixins.scss file.

Bourbon Mixins

• Bourbon Docs

Custom Mixins

Create a custom mixin when anticipating a reusable block of css.

Example Mixin

@mixin rotate($deg: 90deg) {
    -webkit-transform: rotate($deg);
    -moz-transform: rotate($deg);
    -ms-transform: rotate($deg);
    -o-transform: rotate($deg);
    transform: rotate($deg);
}

• The mixin title is rotate

• The default degree value is 90 degrees

How to Use

.nav-icon {
    @include rotate(75deg);
}

• The mixin is called with @include

• 75deg overrides the 90deg default