Generated by SassMeister.com.

browserslist

> 1%
last 2 versions

SassMeister-input-HTML.html

<p>fdsa</p>

SassMeister-input.scss

// ----
// libsass (v3.5.4)
// ----

@import "breakpoint";
$screen-xs-max: 100px;
$screen-sm-max: 100px;
$screen-md-min: 100px;
$screen-md-max: 100px;
$screen-lg-max: 100px;

@mixin background-location ($bg-location) {
    @if $bg-location == center {
        background-size: cover;
        background-position: 50% 50%;
    }
    @if $bg-location == right {
        background-size: cover;
        background-position: right top;
    }

    @if $bg-location == right-top {
        background-position: right top;
    }

    @if $bg-location == left {
        background-position: left top;
    }
    @if $bg-location == top {
        background-position: center top;
    }
    @if $bg-location == top-cover {
        background-position: center top;
        background-size: cover;
    }
    @if $bg-location == bottom {
        background-position: center bottom;
    }
    @if $bg-location == bottom-right {
        background-position: right bottom;
    }
    @if $bg-location == bottom-right-offset {
        background-position: bottom right -25px;
    }

    @if $bg-location == hero {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -999;
        width: 100%;
        @include breakpoint(max-width $screen-xs-max) {
            height: 100%;
            position: fixed;
        }
    }
    @if $bg-location == fixed {
        background-size: cover;
        background-position: top center;
        position: fixed;
        z-index: -999;
        height: 100%;
        width: 100%;
    }
    @if $bg-location == repeat {
        background-repeat: repeat;
        background-size: auto;
        background-position: top left;
    }
}



@mixin background(
    $bg-location: "center",
    $bg-img:      null,
    $bg-img-md:   null,
    $bg-img-sm:   null,
    $bg-color:    null,
    $bg-color-md: null,
    $bg-color-sm: null,
    $bg-repeat: no-repeat,
    $dir: null,
    $type:  "band"
    ) {
    @if index("band" "card", $type) and ($dir == null) {
        $dir: "../../img/" + $type + "bg";
    }
    // Start background image logic
    // If a small background size is specified
    @if $bg-img-sm {
        @if $bg-color {
            background-color: $bg-color;
        }
        @include breakpoint(max-width $screen-sm-max) {
            @include background-location($bg-location);
            background-image: url($dir+"/" + $bg-img-sm);
            background-repeat: $bg-repeat;
            @if $bg-color-sm {
                background-color: $bg-color-sm;
            }
        }
        @if $bg-img-md {
            @include breakpoint($screen-sm-min $screen-md-max) {
                background-image: url($dir+"/" + $bg-img-md);
                background-repeat: $bg-repeat;
                @if $bg-color-md {
                    background-color: $bg-color-md;
                }
                @if $bg-color-md {
                    background-color: $bg-color-md;
                }
            }
        }
        @if $bg-img {
            @include breakpoint($screen-md-min) {
                background-image: url($dir+"/" + $bg-img);
                background-repeat: $bg-repeat;
            }
        }
    }
    // If a mg background size is specified
    @elseif $bg-img-md {
        @if $bg-color {
            background-color: $bg-color;
        }
        @include breakpoint($screen-sm-min $screen-md-max) {
            @include bg-location($bg-location);
            background-image: url($dir+"/" + $bg-img-md);
            background-repeat: $bg-repeat;
            @if $bg-color-md {
                background-color: $bg-color-md;
            }
        }
        @if $bg-img {
            @include breakpoint($screen-md-min) {
                @include bg-location($bg-location);
                background-image: url($dir+"/" + $bg-img);
                background-repeat: $bg-repeat;
            }
        }
    }

    @else {
        @if $bg-img {
            @include breakpoint($screen-md-min) {
                @include bg-location($bg-location);
                background-image: url($dir+"/" + $bg-img);
                background-repeat: $bg-repeat;
            }
        }
        @if $bg-color-sm {
            @include breakpoint(max-width $screen-md-max) {
                background-color: $bg-color-sm;
            }
        }
        @if $bg-color-md {
            @include breakpoint(max-width $screen-xs-max) {
                background-color: $bg-color-sm;
            }
            @include breakpoint($screen-sm-min $screen-md-max) {
                background-color: $bg-color-md;
            }
        }
        background-color: $bg-color;
    }
}

.test {
  @include background-location($bg-location: "hero")
}

.from-real-page {
  @include background (
            $bg-img: "Lufthansa-story-bg-2000x1115.jpg",
            $bg-img-sm: "Lufthansa-story-bg-800x875.jpg",
            $bg-color: color("rh-white"),
            $bg-location: "bottom",
            $type: "band"
        );
}

SassMeister-rendered.html

<p>fdsa</p>

undefined

.test {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -999;
  width: 100%;
}

@media (max-width: 100px) {
  .test {
    height: 100%;
    position: fixed;
  }
}

.from-real-page {
  background-color: color("rh-white");
}

@media (max-width: 100px) {
  .from-real-page {
    background-position: center bottom;
    background-image: url("../../img/bandbg/Lufthansa-story-bg-800x875.jpg");
    background-repeat: no-repeat;
  }
}

@media (min-width: 100px) {
  .from-real-page {
    background-image: url("../../img/bandbg/Lufthansa-story-bg-2000x1115.jpg");
    background-repeat: no-repeat;
  }
}