# Spacing Mixins

The spacing mixins are some of the most handy in this framework. They can make managing layouts and aligning contents so much simpler. These mixins relate to margins and padding, but additional uses can be made with the spacing function.

The mixins will pull the values based on the $spacing-sizes variable in the _variables.scss file at the root of the /00_Abstracts directory.

# Padding

The available padding mixins are a s follows:

• p() - padding for all four sides of element
• pt() - padding-top
• pl() - padding-left
• pr() - padding-right
• px() - padding-left and padding-right
• py() - padding-top and padding-bottom

# Margin

The available margin mixins are a s follows:

• m() - margin for all four sides of element
• mt() - margin-top
• ml() - margin-left
• mr() - margin-right
• mx() - margin-left and margin-right
• my() - margin-top and margin-bottom

# Example

.card {
    @include p(lg);

    .card-header {
        @include mb(md);
    }

    .card-body {
        @include mb(md);
    }

    .card-footer {
        .button {
            @include px(lg);
            @include py(sm);
        }
    }
}

# !important

Setting the !important property on your rules is as simple as adding another value to your your mixin - mb(lg, true). For mixins that accept more than one parameter, you can use a named parameter to bypass having to define all of the properties - m(lg, $important: true);