Mixins FAQ

Can I include a foundations mixin in a component?

It’s best not to include the mixin directly and instead use the extend for that class. For example, if we’re creating a layout where on desktop there is a column of 5 and a column of 6, which both change to columns of 12 on tablets, the ideal approach—if they can’t be set in the HTML due to involving additional elements—would be to use the extends: @extend .f--col-5; @extend .f--col-tablets-12; and @extend .f--col-6; @extend .f--col-tablets-12;.

When should I create a mixin?

In most projects, we typically don’t need to create new mixins and will primarily use those available in the foundations. However, creating a mixin can be useful if we want to reuse the same set of styles or rules with different values. For instance, if we have a project where background shapes need to be positioned differently in each section, we could create a mixin that accepts these values and applies the necessary styles accordingly. The mixin could look like this:

.c--bg-a {
    @extend .u--position-relative;
    @extend .f--backgound-b;
    &::before,
    &::after {
        content: '';
        @extend .u--position-absolute;
        background-color: rgba(map-get($color-options, a), .3);
        z-index: 0;
    }
    &::before {
        border-radius: 100%;
    }
}
@mixin make-bg-a(
    $circleTop,
    $circleLeft,
    $circleBottom,
    $circleRight,
    $circleWidth,
    $squareTop,
    $squareLeft,
    $squareBottom,
    $squareRight,
    $squareWidth,
) {
    @extend .c--bg-a;
    &::before {
        @if $circleTop {
            top: $circleTop;
        }
        @if $circleLeft {
            left: $circleLeft;
        }
        @if $circleBottom {
            bottom: $circleBottom;
        }
        @if $circleRight {
            right: $circleRight;
        }
        @if $circleWidth {
            width: $circleWidth;
            height: $circleWidth;
        }
    }
    &::after {
        @if $squareTop {
            top: $squareTop;
        }
        @if $squareLeft {
            left: $squareLeft;
        }
        @if $squareBottom {
            bottom: $squareBottom;
        }
        @if $squareRight {
            right: $squareRight;
        }
        @if $squareWidth {
            width: $squareWidth;
            height: $squareWidth;
        }
    }
}

This mixin allows you to pass different positioning and sizing values for both a circle and a square shape in the background. You can then apply the mixin to different sections, like so:

.c--hero-a {
    @include make-bg-a(
        $circleLeft: -100px,
        $circleBottom: -100px,
        $circleWidth: 200px,
        $squareTop: -50px,
        $squareRight: -50px,
        $squareWidth: 180px,
    );
    &--second {
        @include make-bg-a(
            $circleTop: 50%,
            $circleBottom: auto,
            $circleWidth: 25vw,
            $squareWidth: 28vw,
        );
    }
}

By using this approach, we can keep the code clean and flexible, making it easier to adjust the positioning of these background elements as needed across various sections of the website.