Generated by SassMeister.com.

browserslist

> 1%
last 2 versions

SassMeister-input-HTML.html

<section class="ux-band" data-ux-band-background="kitteh">
</section>

SassMeister-input.scss

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// Breakpoint (v2.6.1)
// ----

@import "breakpoint";
$repo: ux;

$screen-zero: 0;
$screen-xs-min: 480px;
$screen-sm-min: 768px;
$screen-md-min: 992px;
$screen-lg-min: 1200px;

$screen-xxs-max: $screen-xs-min - 1;
$screen-xs-max: $screen-sm-min - 1;
$screen-sm-max: $screen-md-min - 1;
$screen-md-max: $screen-lg-min - 1;

%bg-location-center {
    background-size: cover;
    background-position: 50% 50%;
}
%bg-location-right {
    background-size: cover;
    background-position: right top;
}
%bg-location-left {
    background-position: left top;
}
%bg-location-top {
    background-position: center top;
}
%bg-location-bottom {
    background-position: center bottom;
}
%bg-location-bottom-right {
    background-position: right bottom;
}
%bg-location-bottom-right-offset {
    background-position: bottom right -25px;
}
%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;
    }
}
%bg-location-fixed {
    background-size: cover;
    background-position: top center;
    position: fixed;
    z-index: -999;
    height: 100%;
    width: 100%;
}
%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";
    }
    @if $bg-img or $bg-img-md or $bg-img-sm {
      @extend %bg-location-#{$bg-location};
    }
    // 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) {
            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) {
            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) {
                background-image: url($dir+"/" + $bg-img);
                background-repeat: $bg-repeat;
            }
        }
    }
    @else {
        @if $bg-img {
            @include breakpoint($screen-md-min) {
                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;
    }
}

.#{$repo}-band {
  width: 100%;
  height: 200px;
}


[data-#{$repo}-band-background="kitteh"] {
  @include background(
      $dir: "http://placekitten.com",
      $bg-img: "1200/200",
      $bg-img-md: "992/200",
      $bg-img-sm: "480/200",
      $bg-color: #f0f0f0,
      $type: "band"
  );
  
}

SassMeister-output.css

[data-ux-band-background="kitteh"] {
  background-size: cover;
  background-position: 50% 50%;
}

.ux-band {
  width: 100%;
  height: 200px;
}

[data-ux-band-background="kitteh"] {
  background-color: #f0f0f0;
}
@media (max-width: 991px) {
  [data-ux-band-background="kitteh"] {
    background-image: url("http://placekitten.com/480/200");
    background-repeat: no-repeat;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  [data-ux-band-background="kitteh"] {
    background-image: url("http://placekitten.com/992/200");
    background-repeat: no-repeat;
  }
}
@media (min-width: 992px) {
  [data-ux-band-background="kitteh"] {
    background-image: url("http://placekitten.com/1200/200");
    background-repeat: no-repeat;
  }
}

SassMeister-rendered.html

<section class="ux-band" data-ux-band-background="kitteh">
</section>