Cacher is the code snippet organizer for pro developers

// Basically really complicated looking, but very fast way to use multiple backgrounds
// for the flexible height areas. Applies a top no-repeat image, middle repeat-y image,
// and a bottom no-repeat image. You really only need to use one mixin when generating
// the background image stuff: ".flexible-height-background(@type, @screen)". 
// @type should be the type of background you want. It should match the variable name
// for the image url within .image-vars()
//
// The screen is the media target you want: mobile, tablet, or desktop.
//
// Image filenames should be in the format:
// ['imgname']-[top|middle|bottom]-[mobile|desktop|tablet|...].jpg
.image-vars(@vars: top mobile) {
    @imgPath: '../img/';
    @uniquePath: %('%d[addUniqueNameHere]%D-%a.jpg', ~"@{imgPath}", extract(@vars, 1), extract(@vars, 2));
    @varIsKeyword: url(@uniquePath);
}

.flexible-background-getter(@type, @screen, @counter: 3) when (@counter >= 1) {
    @positions: top, bottom, middle;
    .image-vars(extract(@positions, @counter) @screen);
    .flexible-background-getter(@type, @screen, (@counter - 1));    // next iteration
    background-image+: @@type;
}

.flexible-height-background-init(@type, @screen) {
    .image-vars(middle @screen);
    background: @@type top center repeat-y @black; // fallback
    background-position: top center, bottom center, center;
    background-repeat: no-repeat, no-repeat, repeat-y;
}

.flexible-height-background(@type, @screen: mobile) {
    .flexible-height-background-init(@type, @screen); // other props
    .flexible-background-getter(@type, @screen); // looper gets all 3 images
}

// example use:
div {
  .flexible-height-background(varIsKeyword, mobile);
}