Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// Flint (v1.12.0)
// ----

@import "flint";

@include _(foundation);

/**
 * Cross media extends with Flint
 *
 * @param {String} $name - placeholder name
 *
 * @output placeholder for every possible media scope
 */
@mixin placeholder($name) {
  $selectors: ();
  
  // Get breakpoint keys
  $breakpoints: flint-get-all-keys();
  $bp: ();
  
  // Build out list of placeholder-ified keys
  @each $breakpoint in $breakpoints {
    $bp: append($bp, (#{"%" + $breakpoint}), "comma");
  }
  
  // Let Sass build out a nice list of combinations
  //   by using @extend (fancy)
  %infinity, #{$bp} {
    -flint-cross-media-extends: true;
    #{$bp} {
      @extend %infinity;
      $selectors: &;
    }
  }
  
  // Create initial placeholder
  %#{$name} {
    @content;
  }
  
  // Create duplicate placeholder for each possible scope
  @each $group in $selectors {
    $high: str-slice(nth($group, 1), 2);
    $low: str-slice(nth($group, 2), 2);
    %#{$name}-#{$low + if($high != $low, ('-' + $high), '')} {
      @include _(if($high != $low, (from $low to $high), ($low))) {
        @content;
      }
    }
  }
}

// Create new placeholder!
@include placeholder(placeholder) {
  opacity: 0.8;
  
  &:hover {
    opacity: 1;
  }
}

// Tests
test-1 {
  @extend %placeholder;
  
  @include _(desktop) {
    @extend %placeholder-desktop;
  }
  
  @include _(from laptop to infinity) {
    @extend %placeholder-laptop-infinity;
  }
}

test-2 {
  @extend %placeholder;
  
  @include _(desktop) {
    @extend %placeholder-desktop;
  }
  
  @include _(from laptop to infinity) {
    @extend %placeholder-laptop-infinity;
  }
}

test-3 {
  @extend %placeholder;
  
  @include _(desktop) {
    @extend %placeholder-desktop;
  }
  
  @include _(from tablet to laptop) {
    @extend %placeholder-tablet-laptop;
  }
  
  @include _(from laptop to infinity) {
    @extend %placeholder-laptop-infinity;
  }
}

SassMeister-output.css

*, *:before, *:after {
  box-sizing: border-box;
}
/**
 * Cross media extends with Flint
 *
 * @param {String} $name - placeholder name
 *
 * @output placeholder for every possible media scope
 */
test-1, test-2, test-3 {
  opacity: 0.8;
}
test-1:hover, test-2:hover, test-3:hover {
  opacity: 1;
}

@media (min-width: 40.0625em) {
  test-1, test-2, test-3 {
    opacity: 0.8;
  }
  test-1:hover, test-2:hover, test-3:hover {
    opacity: 1;
  }
}

@media (min-width: 60.0625em) {
  test-1, test-2, test-3 {
    opacity: 0.8;
  }
  test-1:hover, test-2:hover, test-3:hover {
    opacity: 1;
  }
}

@media (min-width: 20.0625em) and (max-width: 60em) {
  test-3 {
    opacity: 0.8;
  }
  test-3:hover {
    opacity: 1;
  }
}