Mixins

There are a few mixins in the framework to help with common styling needs.

Clearfix

The clearfix() mixin is way to apply a clear fix and allows a container to fully enclose its floated children.

Floated Element
Floated Element 
Markup
<div class="float-example">
    <div class="float-example__element">
        Floated Element
    </div>
    
    <div class="float-example__element">
        Floated Element
    </div>
</div>

SASS CSS
.float-example
{
    @include clear-fix();
    @include box(
        $background: $gold-100, 
        $padding: 1em, 
        $border-size: 1px, 
        $border-color: $gold-400
    );
    margin-bottom: $base-margin + 0em;
}

.float-example__element
{
    width: 160px;
    height: 160px;
    float: left;
    padding: 1em;
    margin: 0 .5em .5em 0;
    background-color: $gold-300;
    border: 1px solid $gold-400;
}

Box

The box() mixin is good for adding emphasis to an element.

Mixin Variables

SASS CSS
$background             (Optional) Defaults to $box-bg-color. Use `none` to remove 
$padding                (Optional) Defaults to 1rem.
$border-size            (Optional) Defaults to 0.
$border-color           (Optional) Defaults to $box-border-color.
$border-style           (Optional) Defaults to `Solid`.

A box with some added style options.

Markup
<div class="box-example">
    <p>A box with some added style options.</p>
</div>

SASS CSS
.box-example 
{
    @include box(
        $background: $gold-100, 
        $padding: 1em, 
        $border-size: 1px, 
        $border-color: $gold-400
    );
}

Center Block

The center-block() mixin is a quick way to center layouts.

Mixin Variables

SASS CSS
$max-width   (Optional) Defaults to $base-max-width. Use `none` to disable.
$min-width   (Optional) Defaults to $base-min-width. Use `none` to disable.

This is a centered container.

Markup
<div class="center-block-example">
    <p>This is a centered container.</p>
</div>

SASS CSS
.center-block-example
{
    @include center-block(
        $max-width: 500px, 
        $min-width: 250px
    );
    @include box();
    text-align: center;
}

Image Replacement

Replacing HTML elements with images in CSS is a common need, so we have a pair of Sass mixins that can be employed.

Standard Image Replacement

replace-with-image() offsets an element's text, and sets a background image.

Printable Image Replacement

print-image() guarantees that a background image shows up when a page is printed. Use inside @media print.

Mixin Variables

SASS CSS
$filename       (Optional) Filename of the image. Defaults to `none`
$width          (Optional) Width of the image. Defaults to `none`
$height         (Optional) Height of the image. Defaults to `none`

Mizzou Logo

Markup
<p class="replace-with-image-example">Mizzou Logo</p>

SASS CSS
.replace-with-image-example
{
    @include replace-with-image(
        $filename: 'mu-logo-large.svg',
        $width: 66px,
        $height: 74px
    );   
    
    @media print 
    {
        @include print-image(
            $filename: 'mu-logo-large.svg',
            $width: 66px,
            $height: 74px
        );
    }   
}

First and Last Child

When using a containing element with padding, you may want to override the margins of child element to keep gutters consistent.

first-child() removes the top margin from the first child element and last-child() removes the bottom margin from the last child element. These are both used in the box() mixin.

Child element
Child element
Child element
Markup
<div class="child-example">
    <div class="child-example__element">Child element</div>
    <div class="child-example__element">Child element</div>
    <div class="child-example__element">Child element</div>
</div>

SASS CSS
.child-example 
{
    background-color: $gold-100;
    padding: 1em;
    margin-bottom: $base-margin + 0em;
    @include first-child();
    @include last-child();
    
    .child-example__element
    {
        background-color: $gold-300;
        padding: 1em;
        margin: 1em 0;
    }  
}