public/scss/libraries/_mixins.scss
@mixin center-x($_position: absolute) {
    display  : inline-block;
    position : $_position;
    left     : 50%;
    @include translate(-50%, -50%);
}

@mixin center-y($_position: absolute) {
    display  : inline-block;
    position : $_position;
    top      : 50%;
    @include translate(0, -50%);
}

@mixin center-all($_position: absolute) {
    display  : inline-block;
    position : $_position;
    top      : 50%;
    left     : 50%;
    @include translate(-50%, -50%);
}

@mixin triangle-up($_width, $_height, $_background-color: transparent) {
    $left-right : $_width/2;
    $bottom : $_height;
    border-left   : $left-right solid transparent;
    border-right  : $left-right solid transparent;
    border-bottom : $bottom solid $_background-color;
}
@mixin triangle-down($_width, $_height, $_background-color: transparent) {
    $left-right : $_width/2;
    $top : $_height;
    border-left   : $left-right solid transparent;
    border-right  : $left-right solid transparent;
    border-top : $top solid $_background-color;
}
@mixin triangle-left($_width, $_height, $_background-color: transparent) {
    $top-bottom : $_width/2;
    $right : $_height;
    border-top  : $top-bottom solid transparent;
    border-bottom : $top-bottom solid transparent;
    border-right : $right solid $_background-color;
}
@mixin triangle-right($_width, $_height, $_background-color: transparent) {
    $top-bottom : $_width/2;
    $left : $_height;
    border-top  : $top-bottom solid transparent;
    border-bottom : $top-bottom solid transparent;
    border-left : $left solid $_background-color;
}

//When you have a container with fixed width
//and you want the background of this container
//is full
@mixin full-bg($_background-color: inherit) {
    position : relative;
    &:before {
        content          : '';
        display          : block;
        position         : absolute;
        width            : 1000%;
        left             : 50%;
        margin-left      : -500%;
        height           : 100%;
        background-color : $_background-color;
        z-index          : 0;
    }
    > * {
        position : relative;
    }
}