multi-border.scss

// Mixin for multiple borders
$default-inner-border-width: 5px !default;
$default-inner-border-color: red !default;
$default-middle-border-width: 5px !default;
$default-middle-border-color: green !default;
$default-outer-border-width: 5px !default;
$default-outer-border-color: blue !default;
@mixin multi-border(
    $inner-border-width: $default-inner-border-width,
    $inner-border-color: $default-inner-border-color,
    $middle-border-width: $default-middle-border-width,
    $middle-border-color: $default-middle-border-color,
    $outer-border-width: $default-outer-border-width,
    $outer-border-color: $default-outer-border-color) {

    position: relative;
    margin: $inner-border-width + $middle-border-width;
    border: $inner-border-width solid $inner-border-color;

    &:before {
        content: " ";
        position: absolute;
        z-index: -1;
        top: -($inner-border-width + $middle-border-width*2);
        left: -($inner-border-width + $middle-border-width*2);
        right: -($inner-border-width + $middle-border-width*2);
        bottom: -($inner-border-width + $middle-border-width*2);
        background: $middle-border-color;
        border: $outer-border-width solid $outer-border-color;
    }
}