Generated by SassMeister.com.

SassMeister-input.sass

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

=respond-to($val, $query: min-width, $media: screen)
  @media #{$media} and ($query: $val)
    @content

$b-breakpoints: (s: 400px, m: 800px, l: 1200px)

$tool-display-isActive: true !default
$tool-opacity-isActive: true !default
$tool-opacity-options: ( denominators: (2, 3, 4), breakpoints: (b, s, m) ) !default

@each $breakpoint in map-get($tool-opacity-options, breakpoints)

  @if $breakpoint == 'b'
    .opf
      opacity: 0
    
    .op-1of1
      opacity: 1

    @each $denominator in map-get($tool-opacity-options, denominators)
      @for $numerator from 1 through ($denominator - 1)
        .op-#{$numerator}of#{$denominator}
          opacity: $numerator / $denominator

  @else
    +respond-to(map-get($b-breakpoints, $breakpoint))
      .opf--#{$breakpoint}
        opacity: 0

      .op-1of1--#{$breakpoint}
        opacity: 1

      @each $denominator in map-get($tool-opacity-options, denominators)
        @for $numerator from 1 through ($denominator - 1)
          .op-#{$numerator}of#{$denominator}--#{$breakpoint}
            opacity: $numerator / $denominator

SassMeister-output.css

.opf {
  opacity: 0;
}

.op-1of1 {
  opacity: 1;
}

.op-1of2 {
  opacity: 0.5;
}

.op-1of3 {
  opacity: 0.33333;
}

.op-2of3 {
  opacity: 0.66667;
}

.op-1of4 {
  opacity: 0.25;
}

.op-2of4 {
  opacity: 0.5;
}

.op-3of4 {
  opacity: 0.75;
}

@media screen and (min-width: 400px) {
  .opf--s {
    opacity: 0;
  }

  .op-1of1--s {
    opacity: 1;
  }

  .op-1of2--s {
    opacity: 0.5;
  }

  .op-1of3--s {
    opacity: 0.33333;
  }

  .op-2of3--s {
    opacity: 0.66667;
  }

  .op-1of4--s {
    opacity: 0.25;
  }

  .op-2of4--s {
    opacity: 0.5;
  }

  .op-3of4--s {
    opacity: 0.75;
  }
}
@media screen and (min-width: 800px) {
  .opf--m {
    opacity: 0;
  }

  .op-1of1--m {
    opacity: 1;
  }

  .op-1of2--m {
    opacity: 0.5;
  }

  .op-1of3--m {
    opacity: 0.33333;
  }

  .op-2of3--m {
    opacity: 0.66667;
  }

  .op-1of4--m {
    opacity: 0.25;
  }

  .op-2of4--m {
    opacity: 0.5;
  }

  .op-3of4--m {
    opacity: 0.75;
  }
}